Hi i have this animated width changer, it seems to auto resize to 100% when i click expand on this script then click my header logo. any ideas why?
$(".fluid").hide();
$(".fixed").click(function() {
$("#mainwidth").animate({width: "1024px"}, 800);
$(this).hide();
$(".fluid").show();
$.cookie("width","fixed", {expires: 365});
return false;
});
$(".fluid").click(function() {
$("#mainwidth").animate({width: "95%"}, 800);
$(this).hide();
$(".fixed").show();
$.cookie("width","fluid", {expires: 365});
return false;
});
if($.cookie("width") == "fixed") {
$(".fixed").hide();
$(".fluid").show();
$("#mainwidth").css("width","1024px");
};
text-align: left;
line-height: 1.4;
margin: auto auto;
margin-top: 40px;
margin-bottom: 50px;
The issue occurs in the following block:
<script type="text/javascript">
jQuery(function($) {
$(".fluid").hide();
$(".fixed").click(function() {
$("#mainwidth").animate({width: "1024px"}, 800);
$(this).hide();
$(".fluid").show();
$.cookie("width","fixed", {expires: 365});
return false;
});
$(".fluid").click(function() {
$("#mainwidth").animate({width: "95%"}, 800);
$(this).hide();
$(".fixed").show();
$.cookie("width","fluid", {expires: 365});
return false;
});
if($.cookie("width") == "fixed") {
$(".fixed").hide();
$(".fluid").show();
$("#mainwidth").css("width","1024px");
};
});
</script>
lets have a look at the last statement:
if($.cookie("width") == "fixed") {
$(".fixed").hide();
$(".fluid").show();
$("#mainwidth").css("width","1024px");
};
it instructs the browser to change the width when page loads. if the width cookie value is "fixed", then set width to 1024px. however, what happens if the page reloads while the cookie value is "fluid" ?
when you click the logo, it reloads the page. hence, if the cookie value is fluid, the width will not be set to the relevant value. just add another block of code to handle the situation where the cookie value is "fluid" and it will work fine.
if($.cookie("width") == "fixed") {
$(".fixed").hide();
$(".fluid").show();
$("#mainwidth").css("width","1024px");
}
else if($.cookie("width") == "fluid") {
$(".fluid").hide();
$(".fixed").show();
$("#mainwidth").css("width","95%");
};
Related
this the CSS I use.
.setting-box
{
position: fixed;
left:-200px;
top:0;
width: 200px;
z-index: 1000;
min-height: 100vh;
}
.toggle-setting
{
position: absolute;
right: -34px;
top: 6em;
background: #fff;
border-radius: 0px 5px 5px 0;
text-align: center;
cursor: pointer;
}
I tried a lot of things but it doesn't work!
that code works very well but.
except when I click on the page the setting box doesn't close
$('.setting-box .toggle-setting').on('click',function () {
$(this).parent('.setting-box').toggleClass('open');
if ($(this).parent('.setting-box').hasClass('open')) {
$(this).parent('.setting-box').animate({
left:0,
},1000);
} else {
$(this, 'body').parent('.setting-box').animate({
left:'-200'
},1000);
}
});
You can try this.
EDIT
var clicked = false;
$('.setting-box .toggle-setting').on('click',function () {
if (clicked == false) {
$(this).parent('.setting-box').animate({
'left' : '0',
},1000);
clicked = true;
} else {
$(this).parent('.setting-box').animate({
'left' : '-200px',
},1000);
clicked = false;
}
console.log(clicked);
});
$(document).click( function () {
var target = $(event.target);
if (!target.is(".toggle-setting") && !target.is('.setting-box') && clicked == true) {
$('.setting-box').animate({
'left' :'-200px',
},1000);
clicked = false;
console.log(clicked);
}
});
the first function do toggle setting box;
$('#gear-button').click(function() {
$(".setting-box").toggleClass("display-block");
});
second function hide setting box on document click (body click)
// hide setting box on body click
$(document).on('click', function() {
$(".setting-box").removeClass("display-block");
});
the third function stop the click event when the user clicks on a button or setting box to prevent document click
$("#gear-button, .setting-box").click(function(e) {
e.stopPropagation();
})
In general, you can use this template to add your own animation and classes.
the full example :
JSFiddle
You can place the settings block in another block, place the settings in the align:center;,
add from this from the z-index:; and make when you click on the gear, or anywhere, so that this block takes the style of display:none;. This may help you.
I am trying to create an expandable rollover but to interact with elements inside. So what I have here is an expandable div and when is expanded another div is shown "x". What I want is when I click on #wrap to go on google and when I click on #button to go on yahoo. How you can see, now if I am over "x" I am going out of #wrap area and going as mouseout. Any idea how to fix this?
https://jsfiddle.net/Ln6q9q9b/
<script>
$(document).ready(function() {
$("#wrap").hover(
//on mouseover
function() {
$(this).animate({height: '+=250'}, 'slow');
$('#button').css('display', 'block');
expanded = true;
console.log("expanded is " + expanded);
},
//on mouseout
function() {
$(this).animate({height: '-=250px'}, 'slow');
$("#button").hide();
expanded = false;
console.log("expanded is " + expanded);
}
);
$('#wrap').on('click', function(){
window.open('http://google.com', 'click', 'window settings');
return false;
console.log('click');
});
if(expanded = true){
$("#button").on('click', function(){
window.open('http://yahoo.com', 'click', 'window settings');
return false;
});
};
});
</script>
<style type="text/css">
#wrap{
width: 900px;
height:50px;
overflow:hidden;
background: black;
}
#button{
position: absolute;
color: white;
left: 10;
top: 10;
width: 10px;
height: 10px;
cursor: pointer;
}
</style>
<body>
<div id="wrap">
</div>
<div id="button">X</div>
</body>
Add the button inside wrap.
And give position: relative; to wrap.
https://jsfiddle.net/afelixj/Ln6q9q9b/1/
Not 100% sure what you're trying to achieve, but take a look at relatedTarget.
For mouseout, indicates the element being entered; for mouseover,
indicates the element being exited.
To your mouseout listener you could add
function (evt) {
if(evt.relatedTarget.id === "button") return;
$(this).animate({height: '-=250px'}, 'slow');
//etc;
}
The following seems to work
$(document).ready(function() {
var expanded = false;
$("#wrap").hover(
//on mouseover
function() {
if (expanded) { return; }
$(this).animate({height: '+=250'}, 'slow');
$('#button').css('display', 'block');
expanded = true;
console.log("expanded is " + expanded);
},
//on mouseout
function(evt) {
if (evt.relatedTarget.id === "button") { return; }
$(this).animate({height: '-=250px'}, 'slow');
$("#button").hide();
expanded = false;
console.log("expanded is " + expanded);
}
);
$('#wrap').on('click', function(){
window.open('http://google.com', 'click', 'window settings');
return false;
console.log('click');
});
$("#button").on('click', function(evt){
window.open('http://yahoo.com', 'click', 'window settings');
return false;
});
});
I've added if (expanded) { return; } to the mouseover listener too, and removed the if (expanded = true) check entirely.
If I understand you right, all you need to do is put the #button inside the #wrap div.
<div id="wrap"><div id="button">X</div></div>
Leave the rest the same and it seems to work as you want.
I've build a menu that collapse after you scroll down more than 250px from the top and returns to its original state when you go back to the top. But my website has some anchorlinks that link to the middle of the home page. When i go directly to these links the menu doesn't work. I have to scroll first. Is their a way to fix this?
This is the code i used:
<script>
jQuery(function () {
jQuery('.fixed').data('size', 'big');
});
jQuery(window).scroll(function () {
if (jQuery(window).scrollTop() > 250) {
if (jQuery('.fixed').data('size') == 'big') {
jQuery('.fixed').data('size', 'small');
jQuery('.fixed').stop().animate({
top: '-125px'
}, 600);
jQuery('.navbar-nav').stop().animate({
top: '15px'
}, 600);
jQuery('.dmbs-header-img').stop().animate({
opacity: '0'
}, 200);
jQuery('.logo-simple').stop().delay(200).animate({
top: '120px'
}, 600);
}
} else {
if (jQuery('.fixed').data('size') == 'small') {
jQuery('.fixed').data('size', 'big');
jQuery('.fixed').stop().animate({
top: '0px'
}, 200);
jQuery('.navbar-nav').stop().animate({
top: '0px'
}, 200);
jQuery('.dmbs-header-img').stop().animate({
opacity: '1'
}, 100);
jQuery('.logo-simple').stop().animate({
top: '-50px'
}, 200);
}
}
});
</script>
Just trigger the scroll event on anchor click (or on any other event you need).
jQuery('a').click(function(){
jQuery(window).scroll();
});
or
Move your code inside a function and call it on scroll, or on anchor click:
function checkScroll(){
if(jQuery(window).scrollTop() > 250)
{
// Your code
}
else
{
// Your code
}
}
jQuery(window).scroll(function(){
checkScroll();
});
jQuery('a').click(function(){
checkScroll();
});
The second solution may give you more flexibility.
I am trying to achieve the "back to top" feature on a page through simple jquery. The "BACK TO TOP" button appears/disappears as expected.
When it appears if I click on it, I expect it to go to the top of the page, instead nothing happens. I am not sure what's going wrong.
Here's the code:
css:
#btoTop {
padding: 15px 10px;
background: #1f242a;
color: #fff;
position: fixed;
bottom: 0;
right: 15px;
display: none;
cursor:pointer;
cursor:hand;
width:130px;
height:40px;
}
html:
<div id='btoTop'>BACK TO TOP</div>
js:
$(document).ready(function(){
$(window).scroll(function(){
if($(window).scrollTop() > 0){
$("#btoTop").fadeIn("slow");
}
else {
$("#btoTop").fadeOut("slow");
}
});
$("#btoTop").click(function(event){
event.preventDefault();
$("html, body").animate({scrollTop:0 },"slow");
});
});
Note: If I call the click function inside the $(window).scroll(), I am able to click the button. But it flickers and doesn't work well with window resize.
$(document).ready(function(){
$(window).scroll(function(){
if($(window).scrollTop() > 0){
$("#btoTop").fadeIn("slow");
}
else {
$("#btoTop").fadeOut("slow");
}
$("#btoTop").click(function(event){
event.preventDefault();
$("html, body").animate({scrollTop:0 },"slow");
});
});
});
You're binding click on your button every single time you scroll, which is unnecessary. You should change it:
$(document).ready(function () {
$(window).scroll(function () {
if( $(window).scrollTop() > 0 ) {
$("#btoTop").fadeIn("slow");
} else {
$("#btoTop").fadeOut("slow");
}
});
// Bound a single time
$("#btoTop").click(function ( event ) {
event.preventDefault();
console.log("Clicked the button");
$("html, body").animate({scrollTop:0 },"slow");
});
});
This might not be the problem, but should be changed to avoid strange behaviours in your code.
I figured out the button was not yet available in the DOM when I was trying to click it.
Adding a timer on it worked pretty good. Hope this helps someone out there with similar issue...
$(document).ready(function(){
$(window).scroll(function(){
if($(window).scrollTop() > 0){
$("#btoTop").fadeIn("slow");
}
else {
$("#btoTop").fadeOut("slow");
}
});
$timeout( function() {
$("#btoTop").click(function(event){
event.preventDefault();
$("html, body").animate({scrollTop:0 },"slow");
});
}, 500);
});
I have a script that animated my image on the header. Is shrinks it when user scrolls down and enlarges it when user reaches the top. Here it is:
function headerScroll() {
$(window).scroll(function() {
if($(document).scrollTop() != 0) {
$('#headerContainer').addClass('smaller');
$('#header img').animate({
height: '170px',
left: '414px',
top: '10px'
},200);
} else if($(document).scrollTop() < 100) {
$('#header img').animate({
height: '307px',
left: '361px',
top: 0
},200, function() {
$('#headerContainer').removeClass('smaller');
});
}
});
}
Problem is - sometimes (not always) secound animation doesn't run for a while. It sometimes wait a few secounds. How can I prevent it?
edit: when I added alert('test') either before or after animate, it ran well-timed.
Use: $('#header img').animate().stop().animate(....
Hope is work