Changing HTML Content on Click & Remove/Reinit qTips

[ifthatdoesntdoit]

Hey, gang. Just starting out in web design recently and any help is greatly appreciated. This is for a personal site so please bare with me if things seem out of sorts some. I have a bunch of neat thoughts about getting the tooltip portion of the site done but admittedly I'm a little in over my head at the moment.

Currently I am working with the following code:

The HTHL

HTML Code

<div id="sidemenu-container">
 
    <div id="sidemenu">
 
        <div class="title-text">Colors</div>
 
        <ul id="sidemenu-colors-inner">
 
             <li id="m1" class="tooltip red">
                 <div id="sm1">
                     <p>apply alternate color #1 to the background</p>
                 </div>
             </li>
 
             <li id="m2" class="tooltip blue">
                 <div id="sm2">
                     <p>apply alternate color #2 to the background</p>
                 </div>
             </li>
 
             <li id="m3" class="tooltip green">
                 <div id="sm3">
                     <p>apply alternate color #3 to the background</p>
                 </div>
             </li>
 
        </ul>
 
    </div>
 
</div>
 
 
 
<div id="colorpicker-container">
    <div id="colorpicker">
        <div class="title-text">Colorpicker</div>
        <p>Choose Your Own Color</p>
    </div>
</div>
 
 
 
<div id="on-off-container">
    <div id="tooltips-on">qTips On</div>
    <div id="tooltips-off">qTips Off</div>
</div>
 
<div id="bg-color"></div>

The css

CSS Code

#sidemenu-container {
    display: block; position: absolute; top: 60px; right: 60px; width: auto; height: auto; border: 1px solid rgba(160,160,160,1.0); z-index: 5;
}
#sidemenu {
    display: block; position: relative; width: auto; height: auto; z-index: 6;
}
#sidemenu li {
    display: block; position: relative; width: auto; height: 30px; padding: 6px 7px 0 7px; z-index: 7;
}
#m1, #m2 { border-bottom: 1px solid rgba(160,160,160,1.0); }
#sidemenu li:hover, #colorpicker:hover, #on-off-container:hover {
    cursor: pointer;
}
#sm1, #sm2, #sm3 {
    display: block;
}
.red { background: rgba(255,0,0,1.0); }
.blue { background: rgba(0,0,255,1.0); }
.green { background: rgba(0,255,0,1.0); }
#colorpicker-container {
    display: block; position: absolute; top: 250px; right: 60px; width: auto; height: auto; border: 1px solid rgba(160,160,160,1.0);
}
#colorpicker {
    display: table-cell; position: relative; vertical-align: middle; text-align: center; width: 271px; height: 100px; background: rgba(215,215,215,1.0);
}
.title-text {
    display: block; position: absolute; top: -19px; left: 1px; font-size: 12px; letter-spacing: 2px; color: rgba(160,160,160,1.0);
}
#on-off-container {
    display: block; position: fixed; top: 0; left: 0; width: auto; height: auto; background: rgba(255,255,255,1.0); border: 1px dashed rgba(180,180,180,1.0); border-top: none; border-left: none;
}
#tooltips-on, #tooltips-off {
    display: block; position: relative; text-align: center; width: 75px; height: 30px; line-height: 230%; letter-spacing: 1px; font-size: 12px; color: rgba(180,180,180,1.0);
}
.title-text, #tooltips-on, #tooltips-off, #colorpicker p, #the-plan, #the-plan .title-text {
    color: rgba(180,180,180,1.0);
    -webkit-transition:all 0.3s ease-in-out;
    -moz-transition:all 0.3s ease-in-out;
    -o-transition:all 0.3s ease-in-out;
}
#sidemenu-container:hover .title-text, #colorpicker-container:hover .title-text, #on-off-container:hover #tooltips-on, #on-off-container:hover #tooltips-off, #colorpicker p:hover, #the-plan:hover, #the-plan:hover .title-text {
    color: rgba(0,0,0,1.0);
    -webkit-transition:all 0.3s ease-in-out;
    -moz-transition:all 0.3s ease-in-out;
    -o-transition:all 0.3s ease-in-out;
}
.title-text, #sidemenu, #colorpicker, #on-off-container {
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   -o-user-select: none;
   user-select: none;
}
#colorpicker p {
    font-size: 20px; color: rgba(0,0,0,1.0);
}
#colorpicker p:hover {
     color: rgba(255,0,0,1.0);
}
#tooltips-on {
    display: none;
}
#bg-color {
    display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,1.0); -moz-background-size: cover; -o-background-size: cover; background-size: cover; z-index: -1;
}
.ui-tooltip-default .ui-tooltip-content {
    height: 26px; background: rgba(215,215,215,1.0); border: 1px solid rgba(120,120,120,1.0); overflow: visible;
}
.ui-tooltip-default .ui-tooltip-content p {
    font-size: 16px; line-height: 140%; color: rgba(0,0,0,1.0);
}
#the-plan {
    display: block; position: absolute; top: 425px; left: 0; width: auto; height: auto; padding: 20px 30px; background: rgba(255,255,255,0.5); border-top: 1px dashed rgba(180,180,180,1.0);
}
#the-plan p {
    color: rgba(0,0,0,1.0);
}
#the-plan:hover {
    background: rgba(255,255,255,0.8);
}

The js

JAVASCRIPT Code

$(document).ready(function() {
 
// Initializing qTip Tooltips
 
        $('.tooltip[id^="m"]').each(function(){
            $(this).qtip({
                prerender: true,
                suppress: false,
                toggle: false,
                content: $('#s' + $(this).attr('id')).clone(),
                show: {
                    delay: 000,
                    effect: function (api) { $(this).fadeIn(000); }
                },
                hide: {
                    event: 'mouseleave',
                    fixed: true,
                    delay: 000,
                    effect: function (api) { $(this).fadeOut(000); }
                },
                position: {
                    my: 'center right',
                    at: 'center left',
                    adjust: {
                        x: -50,
                        y: -1
                    }
                },
                style: {
                    classes: 'ui-tooltip-default',
                    tip: false
                }
            });
        });
 
// Turning Tooltips Off/On        
 
        $("#on-off-container").click(function () {       
            $("#tooltips-off, #tooltips-on").toggle();
        });
 
// Changing Background color       
 
        $("#m1").click(function () {       
            $("#bg-color").css('background-color', 'rgba(255,0,0,1.0)');
        });
        $("#m2").click(function () {       
            $("#bg-color").css('background-color', 'rgba(0,0,255,1.0)');
        });
        $("#m3").click(function () {       
            $("#bg-color").css('background-color', 'rgba(0,255,0,1.0)');
        });        
 
    });

Here's what I'm trying to do. There are three buttons, each with a tooltip when hovering. Clicking any of the three buttons will change the background color to either red, blue or green. In addition I am trying to accomplish the following-

1.) Upon clicking any of the three color buttons:

a. Have the qtip tooltip for that button fadeOut/300ms
b. Have the content change so that the div#colorpicker is now 'cloned' into the tooltip. The intention is to leave the original instance of the div#colorpicker in place on page while also pupulating the tooltip with it on click.
c. Now Have the tooltip with its changed content fadeIn/300ms.
d. Finally, replace/reinitialize the original tooltip content (div#m1, div#m2, div#m3) for any buttons that may have been clicked previously.


2.) Turn all tooltips Off/On by clicking the div#on-off-container. I've gotten it to toggle the two divs within it for appearance (div#tooltips-off, div#tooltips-on) but I still need to get it functioning.

If possible I would love to be able to choose between turning on/off only the original tooltips when hovering, thus preserving the tooltips when clicked, or all tooltips (both the original on hover and the replacement when clicked). Either a two button or a toggling single button approach would work I suppose.

Live example: http://jsfiddle.net/fkFGn/2/

I've been reading through the posts but have become a little overwhelmed so I thought I should just post this to get things started.

Thanks a million. : )

[Craig]

The color pickeri mplemtnation depends entirely on the plugin you're using for it... can you set that up in the live example please? Here's what I have so far: http://jsfiddle.net/fkFGn/5/

[ifthatdoesntdoit]

Hi, Craig. Thank you for the quick response. The toggle button for turning the tooltips off/on is really cool and I appreciate your help.

I have implemented the jQuery UI sliders/colorpicker into the live example: http://jsfiddle.net/ifthatdoesntdoit/fkFGn/6/

I am attempting to get the colorpicker/sliders working as follows:

a. Have the colorpicker sliders/handles animate when any of the three color buttons are clicked.
b. Have the background color change gracefully at 300ms when either the color buttons or the slider 'bars' are clicked.
c. Change/Update the alpha slider gradient to continually show the present color of the colorpicker. Presently the solid portion of the gradient is white and it would be great if this would change with the colorpicker's red, blue and green choices.
d. Have qTip tooltips show in the slider handles when either being dragged, when the slider bars are clicked, or when they are animated by any of the three color buttons being clicked.

Currently the slider 'bar' colors and the handles are not lining up correctly unless the handles themselves are being dragged. Also, I attempted to implement the qtips into the slider handles as documented in your demo on the qtip2 site, but among other issues I encountered I couldn't get the proper numbers to display at either the beginning or end of the sliders, or when clicking the slider 'bars' instead of dragging the handles.

Thank you very much for your help.

[Craig]

I'm not too sure on why the slider isn't working on anything but click, might be a jQuery bug, but this is pretty close to what you want iirc: http://jsfiddle.net/fkFGn/10/

[ifthatdoesntdoit]

Wow, Craig! This is really close to what I was trying to do. Thank you so much. It would have taken me a very long time to figure all of that out, if at all. Can't thank you enough. I'm late for something but I'll get back and update this reply this evening.

As a side note, does it look like we can fade the colorpicker into the tooltip (clone) on click? I have no idea if it's possible but that would be too cool.

[ifthatdoesntdoit]

Craig-

About the slider 'bars' not connecting with the handles until they're dragged, it seems to only be a problem on jsfiddle as they're working flawlessly on my site page.

I've added two separate buttons to decrease and increase the opacity of the div#bg-color by 10% on click. The opacity of the div is changing but I haven't been able to 'animate' the #alpha-slider when the buttons are clicked.

Here's the code so far:

JAVASCRIPT Code

$("#decrease-opacity").click(function (e) {
    $("#bg-color").animate({ opacity: "-=0.1" }, 500);
});
 
$("#increase-opacity").click( function(e) {
    $("#bg-color").animate({ opacity: "+=0.1" }, 500);
});

I was hoping to use .animate() to animate the background change at 1000ms but I couldn't get it to work. The tricky part seems to be that it would need to 'animate' on click of either the slider 'bars' or the color buttons, but stay current/immediate when being dragged. I was messing around with the following code using .animate() to no avail:

JAVASCRIPT Code

// Update background color
    $("#bg-color").css("background-color", "#" + hex);

and likewise for the opacity when the slider is clicked:

JAVASCRIPT Code

change: function(event, ui) {
                $('#bg-color').css('opacity', ui.value);

How feasible would it be to have one half of the #alpha-slider background gradient, the solid half, update continuously as the RGB sliders are changed? Currently the solid color is white but it would be super cool if it was replaced by the current colorpicker result. Here's the css.

CSS Code

background: -moz-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,1)), url('img/misc/alpha-slider-background.png');

I noticed that the green and blue .slider('value') portion of the code below were reversed somehow and that the sliders were 'animating' correctly according to each color, but the background colors were wrong. For example, blue was green and green was blue. I changed them around and everything seems right now. Just wanted to give you a 'heads-up' in case changing this might cause problems going forward. The order was 0,1,2... and now is 0,2,1.

JAVASCRIPT Code

function refreshSwatch(event, ui) {
      var sliders = $('#slider-red, #slider-green, #slider-blue'),
          colors = [
              sliders.eq(0).slider('value'),
              sliders.eq(2).slider('value'),
              sliders.eq(1).slider('value')
          ],

The qtips look awesome on the slider handles. The numbers are all spot-on and I am completely satisfied with how they're working now. That being said, just out of curiosity I was wondering how to get the .text characters changing as the handles are sliding/animating to their final value. Currently the selected value is show immediately, which is perfect.


Lastly, what do you propose is the best solution for cloning the colorpicker into the tooltip? Is it workable? I was thinking that I could possible remove the qtip/tooltip for the clicked color button, then .removeClass and .addClass to bring in the colorpicker where the tooltip was.

Thanks a million, Craig.

---

Oops! Here's the updated live example: http://jsfiddle.net/ifthatdoesntdoit/fkFGn/11/