Hello i have this code:
function goto(id, t){
//animate to the div id.
$(".contentbox-wrapper").animate({"left": -($(id).position().left)}, 500);
// remove "active" class from all links inside #nav
$('#nav a').removeClass('active');
// add active class to the current link
$(t).addClass('active');
}
this code active the horizontal-scroll of the slideshow, and inside the single page of slideshow are presents more div (div1 , div2 , div3) and at each of div is attached this code:
$("#div1").hover(function() {
var $this = $(this);
$this.css({'z-index' : '10', 'boxShadow' : '1px 3px 6px #444', 'position': 'fixed' }).animate({
'height': "390",
'width' : "840",
'marginTop' : "-12",
'marginLeft' : "-12",
});
},
function() {
var $this = $(this);
$this.css({'z-index' : '1', 'boxShadow' : '0px 0px 0px ', 'position': 'static' }).animate({
'height': "350",
'width' : "800",
'marginTop' : "0",
'marginLeft' : "0"
});
});
this is the code in HTML:
<a href="#" onClick="goto('#about', this); return false; " >
<div id="div2" style="background-color:#fff; width:250px;border:1px solid #000;min-height:250px; color:black;">
ABOUT
</div></a>
the problem is that when I click on a div that is present in the page One of slideshow, for example div1, and I need it to move horizontally on the second page,having the mouse inside the div latter moves with the scroll and don't stay in the page One, how can I avoid this?
I wish that when I click the system goes to the second page of the slideshow, but not with him also drag the div I clicked to move to the second page.
Changed the following code, inside the goto(). Here I am check if #div2 is in the hovered state.
If yes, then I take it back to it's original state AND ONLY THEN I move to the next page.
if (parseInt($("#div2").css("z-index"), 10) > 1) {
$("#div2").css({
'z-index': '1',
'boxShadow': '0px 0px 0px ',
'position': 'static'
}).animate({
'height': "250",
'width': "250",
'marginTop': "0",
'marginLeft': "0"
}, function(){
$(".contentbox-wrapper").animate({
"left": -($(id).position().left)
}, 600);
});
}
else {
$(".contentbox-wrapper").animate({
"left": -($(id).position().left)
}, 600);
}
Check it here
UPDATE:
Just add an else condition, check the update code above.
Link
Related
I am new to jQuery widget and trying to learn it, I create a widget for displaying a dialog, the widget's _create() method does the following:
Adds a mask dialog for hiding the user screen.
Adds a close "button" which is a div with a handler for click event
Displaying the dialog to the user
When I click the close div I can remove the widget instance with the following command -
$(this).parent().remove();
I do not find a way to hide the screen masking div I create in the _create method.
Code for the create and close methods follows -
_create: function () {
var handle = this;
if (this.options.Height == 0) this.options.Height = this.element.height();
if (this.options.Width == 0) this.options.Width = this.element.width();
$(document.body).css({ margin: 0, padding: 0 });
this.wrapper = $("<div class='wrapperClass'>").css({
'height': this.options.Height,
'width': this.options.Width,
'position': 'absolute',
'left': '50%',
'margin-left': -1 * this.options.Width / 2,
'top': '50%',
'margin-top': -1 * this.options.Height / 2,
'border': '3px solid red',
'border-radius': this.options.Radius,
'z-index': this.options.Zindex
});
//create the screen masking background
this.maskScreen = $('<div />').css({ 'height': '100%', 'width': '100%', 'position': 'absolute', 'top': 0, 'left': 0, 'background-color': this.options.bgColor, 'z-index': this.options.Zindex - 1, 'display': 'block', 'opacity': this.options.bgOpacity, 'margin': 0, 'padding': 0 });
$('body').append(this.maskScreen);
this.element.css('display', 'block');
this.wrapper.html(this.element);
$('body').append(this.wrapper);
if (this.options.addClose) this._addClose();
},
_addClose: function () {
this.closeButton = $('<div />')
//add close class
.addClass("closeClass").css("z-index", this.options.Zindex + 1);
this.closeButton.on("click", function () {
$(this).parent().remove();
});
this.wrapper.append(this.closeButton);
},
How can I reference the screen masking div I created in the _create() method?
You should make use of the jqueryUI widget _destroy method to do the cleanup for you, that way you can refer all the variables and elements that you have added in the _create method and remove them all in the right order to restore the environment as it was.
In this case your closeButton should simply call the _destroy method of your widget instance and not doing any removal itself.
If you can post a working jsFiddle, I will show you the actual code.
Below is a JS fiddle that I have been using to implement a tooltip on my website.
JSFiddle
However when I implement this on my website, the title attribute value appears on rollover (like an alt attribute) as well as the tooltip. I need it not to do this! The actual code from my website is below.
Javascript
$(function(){
$("ul.thumb li").hover(function() {
$(this)
.css('z-index', '10')
.find('img').addClass("hover")
.stop()
.animate({
marginTop: '-150px',
marginLeft: '-150px',
top: '50%',
left: '50%',
width: '300px',
height: '300px',
padding: '20px'
}, 200, function() {
var $this = $(this),
h = $this.height();
$caption = $('<div class="caption">' + this.title + '</div>')
.css('top', h.toString() + 'px');
$this.after($caption);
});
}, function() {
$('.caption').remove();
$(this)
.css('z-index', '0')
.find('img').removeClass("hover")
.stop()
.animate({
marginTop: '0',
marginLeft: '0',
top: '0',
left: '0',
width: '200px',
height: '200px',
padding: '5px'
}, 400);
});
});
HTML
<ul class="thumb">
<li> <img src="slide1image.png" width="200" height="229" title="come join us and have lots of fun with our clowns, tigers and magician" /></li>
Do not use the title attribute then.
Use data-title as the attribute name and access it with the $this.data('title')
Demo at http://jsfiddle.net/gaby/62NT7/1/
Since the essence of what you want to do is to prevent the default behavior of hovering over an image, the following should take care of it:
$('img').on('hover', function( e ) {
e.preventDefault();
});
WORKING JSFIDDLE DEMO
Other ways of resolving this include:
- removing the attribute: $('img').removeAttr('title')
- saving the value to a data attribute and removing it: $('img').data('title', function() { return this.title; }).removeAttr('title');
- editing your markup so that you use a data attribute instead of title attribute - as #GabyakaG.Petrioli's answer.
I have a div with height:0px and I want it to increase height to 300px when I click on a button.
When I click on the button again, I want it to get height of 0px again.
CSS
nav{
height:0px;
overflow:hidden;
opacity:0;
}
JS
$("#hamburger").click(function(){
$('nav').stop().animate({ height: 300, opacity: 1 }, 'slow');
},function(){
$('nav').stop().animate({ height: 0, opacity: 0 }, 'slow');
});
If I only use:
$("#hamburger").click(function(){
$('nav').stop().animate({ height: 300, opacity: 1 }, 'slow');
});
the animation works. as soon as I add the other line, it doesn't. I also tried using the toggle() function, but the result was that as soon as I load my page, the second part of the toggle function (which is height:0, opacity:0) loaded by itself.
here is a link to my website
Any ideas? Thanks
EDIT
I forgot to say that i am making my website responsive, and that this js code only concerns the mobile version, so to see the result, you should set your browser width to 480px or less
You're trying to call both functions at the same time. One function wants to increase the height of the div, and the other wants to decrease the height of the div.
Try something like this:
$("#hamburger").click(function(){
var maxHeight = 300;
if(+$('nav').height() < maxHeight) {
$('nav').stop().animate({ height: 300, opacity: 1 }, 'slow');
} else if (+$('nav').height() === maxHeight) {
$('nav').stop().animate({ height: 0, opacity: 0 }, 'slow');
}
});
To make it even shorter, you could do:
$("#hamburger").click(function(){
var maxHeight = 300,
nav = $('nav');
nav.stop().animate({ height: +nav.height() < maxHeight ? 300 : 0, opacity: +nav.css('opacity') === 1 ? 0 : 1 }, 'slow');
});
By the way, the random + signs typecast any strings into numbers, just in case.
On my site, I use DOM nodes of class="trigger" as anchors for tooltips. When the mouve hovers these anchors, a tooltip displays. The jQuery code generating the tooltip container is as follows:
$('.trigger').mouseover(function() // OnMouseOver event
{
$("<div/>", {
id: "tooltip",
css: {
display: "none",
position: "absolute",
border: "3px solid #111",
color: "#000",
padding: "5px",
opacity: 1.0,
fontSize: "15pt",
backgroundColor: "#fff",
borderRadius: "15px",
zIndex: 3000
}
}).appendTo(this);
$("#tooltip").html($(this).attr('title'));
$(this).attr('title',''); // empty the title attribute of the anchor (avoiding default browser reaction)
$('#tooltip').show(); // show the tooltip
}).mousemove(function(e) // OnMouse mode event
{
$('#tooltip').css('top', e.pageY + 20); // tooltip 20px below mouse poiunter
$('#tooltip').css('left', e.pageX - 20); // tooltip with mouse pointer
}).mouseout(function() // OnMouseOut event
{
$(this).attr('title',$('#tooltip').html()); // set the title back to initial value
$(this).children('div#tooltip').remove(); // get rid of the tooltip container
});
It works very well when the anchor is positioned in the normal flow of the page but it does not display when the anchor is out of the flow as in
$("<img/>", {
id: "arrowup",
class: "trigger noprint",
css:{
display:"none",
position:"fixed",
bottom:'15px',
right:'10px',
cursor: "pointer"
},
src:"../images/arrowup.jpe",
alt:"vers le haut",
title: "Haut de la page",
click:function(){
$("html, body").animate({scrollTop: "0px"}, 800);
return false;
}
}).appendTo("body");
$(window).bind("scroll", function() {
var obj = $("#arrowup");
if ($(this).scrollTop() > 300){
obj.fadeIn(800);
} else {
obj.fadeOut(800);
}
});
Is this normal behaviour or is there a trick to get the tooltip displayed normally?
If I understood your question right, you need to wrap your image with fixed div:
<div class="fixed">
<img src="http://placehold.it/150x150">
<div class="tooltip">Tooltip</div>
</div>
And CSS:
.fixed {
position: fixed;
bottom: 20px;
right: 20px;
}
.tooltip {
position: absolute;
left: -50px;
top: 0;
display: none;
}
.fixed:hover .tooltip {
display: block;
}
Check JSFiddle
Hover over placeholder to see tooltip.
When you add content dynamically to the page after dom load you need to let javascript know you have done so.
This is done by event propagation. If your triggers are contained within a parent div do this:
$('#parent').on('mouseover', '.trigger', function() {
//your code here.
});
The following code works!
$('.trigger').mouseover(function(){ // OnMouseOver event
$("<div/>", {
id: "tooltip",
css: {
display: "block",
position: "absolute",
border: "3px solid #111",
color: "#000",
padding: "5px",
opacity: 1.0,
fontSize: "15pt",
title: "XXX",
backgroundColor: "#fff",
borderRadius: "15px",
zIndex: 3000
}
}).appendTo("body");
$("#tooltip").html($(this).attr('title'));
$(this).attr('title',''); // empty the title attribute of the anchor (avoiding default browser reaction)
$('#tooltip').show(); // show the tooltip
}).mousemove(function(e) // OnMouse mode event
{
$('#tooltip').css('top', e.pageY + 20); // tooltip 20px below mouse poiunter
$('#tooltip').css('left', e.pageX - 20); // tooltip with mouse pointer
}).mouseout(function() // OnMouseOut event
{
$(this).attr('title',$('#tooltip').html()); // set the title back to initial value
$("body").children('div#tooltip').remove(); // get rid of the tooltip container
});
and note that the only modification made to it is that the div#tooltip is now located in the body rather than as a child of its anchor.
Why does this make it work? I really don't know.
On my site, I use DOM nodes of class="trigger" as anchors for tooltips. When the mouve hovers these anchors, a tooltip displays and moves with the mouse motion. The jQuery code generating the tooltip container was modified as follows:
$("#template").on("mouseover", ".trigger", function(){ // OnMouseOver event
$("<div/>", {
id: "tooltip",
css: {
display: "block",
position: "absolute",
border: "3px solid #111",
color: "#000",
padding: "5px",
opacity: 1.0,
fontSize: "15pt",
title: "XXX",
backgroundColor: "#fff",
borderRadius: "15px",
zIndex: 3000
}
}).appendTo("body");
$("#tooltip").html($(this).attr('title'));
$(this).attr('title',''); // empty the title attribute of the anchor (avoiding default browser reaction)
$('#tooltip').show(); // show the tooltip
}).on("mousemove", ".trigger", function(e){ // OnMouse mode event
$('#tooltip').css('top', e.pageY + 20); // tooltip 20px below mouse poiunter
$('#tooltip').css('left', e.pageX - 20); // tooltip with mouse pointer
}).on("mouseout", ".trigger", function(){ // OnMouseOut event
$(this).attr('title',$('#tooltip').html()); // set the title back to initial value
$("body").children('div#tooltip').remove(); // get rid of the tooltip container
});
Following Edward's suggestion, all $(".trigger").event(function() {...}); were replaced by $("#parent).on("event", ".trigger", function() {...}); so that jQuery would be aware of content added dynamically to the DOM after DOM ready. This new content is generated as follows:
$("<div/>", { // creates a container <div> for the arrowup image
id: "arrowup",
class:"trigger no_underline", // is an anchor for tooltip
css:{
display:"none",
position:"fixed",
bottom:"30px",
right:"30px",
cursor: "pointer"
},
click:function(){ // assign page up functionality
$("html, body").animate({scrollTop: "0px"}, 800);
return false;
},
title: "Haut de page" // title to be passed to the tooltip
}).appendTo("#template");
$("<img/>", { // creates the image and its functionality
src:"../images/arrowup.jpe",
alt:"vers le haut",
}).appendTo("#arrowup");
$(window).bind("scroll", function() { // shows tooltip only when page is scrolled
var obj = $("#arrowup");
if ($(this).scrollTop() > 300){
obj.fadeIn(800);
} else {
obj.fadeOut(800);
}
});
In the original listings, each of the .trigger have been individually given instructions. If new .trigger are created, they won't have heard the instruction and won't respond to mouseover, mousemove and mouseout events, each of them being directly responsible for their own events. In the modified setting, only the container (here #template) has been given the instruction; it is responsible for noticing the events on behalf of its child elements. The work of catching events has been delegated.
Referring to Alexander's comment, in my question I was binding to the anchor position whereas I am now binding to the position of cursor at the time of tooltip firing: this is the behaviour that I expected.
3
When I asked the question, I believed that the non-show of the tooltip was related to the fact the the new element was out of the normal flow (position: fixed). It is not that at all.
Everything works as expected now! Thanks to all who helped me.
I have the below code set up to move certain objects upon clicking an object, but you'll see in Safari and Chrome that the animation for the boxes is a bit off, whereas Firefox shows it correclty.
Is there a way to fix this bug?
http://coreytegeler.com/jg/
$(function(){
$("#nav li").click(function() {
$("#nav").css({
'left' : $(this).position().left + 'px',
'top' : $(this).position().top + 'px'
})
.animate({
'margin-top' : '-175px',
'margin-left' : '0px',
'left' : '10px',
'top' : '50%',
'height' : '370px',
'width' : '70px'
}, 500, 'swing');
$("#name").css({
'top': $(this).position().top + 'px'
})
.animate({
'top' : '100px'
} , 500, 'swing');
});
$("#nav li#a").click(function() {
$(".set#a").animate({
'opacity' : '1' ,
'top' : '50%',
'margin-top' : '-200px'
}, 500, 'swing');
});
});
What you are experiencing is the way that webkit handles conversion of an inline element into a fixed element. No matter what, it is going to default the left to 0 when you change the element to fixed, even if you explicitely tell it otherwise. You can ready more about how to work around it here: Center a position:fixed element
Basically you need to set the left position of the element to 50%, then calculate the a negative margin of 1/2 the width of the element.
Good luck and perhaps look at rewriting your code. You should check out JQuery chaining as some of your code is redundant. Also, since you are only targeting one element, you can drop the .each() as they are not needed. You would only use .each when you want to loop through a selector that could have returned more than one element. In your case, your selectors only target the one element. I've rewritten your code a bit to be more readable, less redundant:
$(function(){
$("#nav ul li").click(function() {
$("#nav ul").css({
'position' : 'fixed',
'left' : $(this).position().left + 'px',
'top' : $(this).position().top + 'px'
})
.animate({
'left' : '10px',
'top' : '50%',
'margin-top' : '-140px',
'height' : '280px',
'width' : '70px'
}, 500, 'swing');
$("#name").css({
'top': $(this).position().top + 'px'
})
.animate({
'position' : 'fixed',
'top' : '100px'
} , 500, 'swing');
});
$("#nav ul li#a").click(function() {
$(".set#a").animate({
'opacity' : '1' ,
'top' : '50%'}, 500, 'swing');
});
});