I am having an issue with my slideToggle function. Once pressed it opens up the way I need it to. But when I scale the browser to test the responsive flow to the site the slideToggle still stays active instead of sliding down. I tried a few functions but nothing seems to work. Below is the scrip I am using without the code to slide down when it hits a specific screen resoultion. How would I go about fixing this issue?
$('#more').click(function () {
var open = $('header').is('.open');
$('#footerPanel')['slide' + (open ? 'Up' : 'Down')](400);
$('header').animate({
bottom: (open ? '-' : '+') + '=120' }, 400, function () {
$('header').toggleClass('open');
});
});
$('#menu').click(function () {
if ($('header').is('.open')) {
$('header')
.removeClass('open')
.animate({
'bottom': "-=120"
}, function () {
var $footer = $('.activetoggle');
if ($footer.length)
$footer
.toggleClass('activetoggle footerButton')
.text('Footer');
});
$('#footerPanel').slideUp(400);
}
});
$('.footerButton').click(function () {
var $this = $(this);
$this.toggleClass('footerButton');
if ($this.hasClass('footerButton')) {
$this.text('Footer');
} else {
$this.text('Close');
}
$(this).toggleClass('activetoggle');
});
My Code
http://jsfiddle.net/wyze/XqUp4/4/
Try if this works for you. I have added to check whether the width is 780(you can change it), when the panel to slide down. Try adding this in you fiddle and check if this works
$(window).resize(function(){ //check when window resize
if($(window).width() < 780){ // check when the window width is less than 780
if ($('header').is('.open')) {
$('header')
.removeClass('open')
.animate({
'bottom': "-=120"
});
$footer = $('.activetoggle');
if ($footer.length) {
$footer.toggleClass('activetoggle footerButton').text('Footer');
}
$('#footerPanel').slideToggle(400);
}
}
});
Related
I want to hide a div once my slider passes a scrollTop() value of 200px. I've looked at this article and tried using it as a template for what I want. I have the following code, but its not hiding the element. Live site
function removeArrow() {
$(window).scroll(function() {
if($('.portfolio-sliders:first-child').scrollTop() > 100) { //use `this`, not `document`
$('.scrl-dwn').css({
'display': 'none'
});
}
});
}
UPDATE
I've updated by code:
function removeArrow() {
$(window).scroll(function() {
var slider = $('.portfolio-sliders:first-child').position.top;
if(slider >= 10) {
$('.scrl-dwn').hide();
}
});
}
which should work, but its not...
Position is a function, not a property. You need to call the function with ():
var slider = $('.portfolio-sliders:first-child').position().top;
Replace your whole removeArrow function with this code.
(If you open your live site, and run this in the console, you can see it's working).
The scroll event never fired, so I handled theese mousewheel events instead.
$(window).bind('DOMMouseScroll mousewheel', function() {
var div = $(".portfolio-sliders:first-child"),
top = div.position().top,
display = top < 400 ? 'none' : '';
$('.scrl-dwn').css({ 'display': display });
});
Use This :
$(window).scroll(function(){
if ($(window).scrollTop() > 660)
{
$(".Left-Section").css("position", "fixed");
$(".Center-Content").css("margin-top", "0");
$(".Right-Nav img").css("transform", "rotate(360deg)");
}
;)
I'm replacing the existing menu in Touchfolio Wordpress theme and I'm trying to figure out how to turn off the responsiveness of the current menu.
I weeded out all associated media queries in css, but something triggers the responsive menu on the slider plugin side. I believe the breakpoint is set to 800px, but I couldn't find anything referring to this within the script.
Here's the link to the existing script from the demo site: http://dimsemenov.com/themes/touchfolio/demo/wp-content/themes/touchfolio/js/jquery.slider-pack.js
You could start by gutting the displayMobileMenu function in the theme's main.js. It looks like this:
displayMobileMenu = function() {
if(mobileMenu) {
mobileMenu.css('display', 'block').removeClass('menu-close-button');
_menusContainer.hide().css({ height : 0 });
return;
}
var headerHeight = _headerSideMenu.height();
mobileMenu = $('<a class="menu-button"><i class="menu-button-icon"></i>menu</a>');
$('.top-logo-group').after(mobileMenu);
setTimeout(function() {
var height = _menusContainer.height();
_menusContainer.hide().css({ height : 0 , top: _headerSideMenu.height()});
mobileMenu.bind('click.mobilemenu',function(e) {
e.preventDefault();
if(isMenuAnimating) {
return false;
}
mobileMenu.toggleClass('menu-close-button');
if ( _menusContainer.is(':visible') ) {
_menusContainer.animate({ height: 0 }, { duration: 300, complete: function () {
_menusContainer.hide();
}
});
} else {
_menusContainer.show().animate({ height : height }, { duration: 300 });
}
isMenuAnimating = false;
return false;
});
}, 0);
},
But could just as easily look like this:
displayMobileMenu = function() {},
There's still some more stuff altering the menu on smaller screens, but it doesn't fully collapse.
Im having trouble getting this to work, so obviously i'm doing something wrong... I created a fade-in hover state on the submenus of my menu, which works perfectly, but when I scale down to mobile view the effect is still relevant, which I do not want as mobile devices don't have hover state. so I rapped my function in a jquery(window).resize function but then it does not work at all.
jQuery(window).resize(function() {
var w = jQuery(window).width();
if (w <= 768 ) {
jQuery('nav.main-nav li').each(function() {
var submenu = jQuery(this).find('ul:first');
jQuery(this).hover(function() {
submenu.css({opacity: 1});
submenu.stop().css({overflow:'hidden', height:'auto', display:'none'}).fadeIn(300, function() {
jQuery(this).css({overflow:'visible', height:'auto', display: 'block'});
});
},
function() {
submenu.stop().css({overflow:'hidden', height:'auto', display:'none'}).fadeOut(300, function() {
jQuery(this).css({overflow:'hidden', display:'none'});
});
});
});
}
});
Instead of using jQuery(window).width();,
try using document.documentElement.clientWidth
When a user clicks on the "Contact Me" button, i want the screen to slide to the #contact element, however cannot figure out how to do it. I've tried various different snippets of code and tried to tailor it to my needs, but nothing seems to work.
The site is here; http://dombracher.com/
Simply want the screen to slide to the div mentioned above, rather than quickly snap to it.
Thanks in advance.
$(document).ready(function() {
$("a[href^='#']").anchorAnimate()
});
jQuery.fn.anchorAnimate = function(settings) {
settings = jQuery.extend({
speed : 1100
}, settings);
return this.each(function(){
var caller = this
$(caller).click(function (event) {
event.preventDefault()
var locationHref = window.location.href
var elementClick = $(caller).attr("href")
var destination = $(elementClick).offset().top;
$("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination}, settings.speed, function() {
window.location.hash = elementClick
});
return false;
})
})
}
You can animate window scroll by yourself
$(".menu2").click(function(){
$(document.body).animate({
"scrollTop": $("#contact").offset().top
}, 2000, "swing"); // animation time and easing
return false; // preventing default jump
});
Fiddle: http://jsfiddle.net/M8JE2/
Or use jquery plugin like http://flesler.blogspot.com/2007/10/jquerylocalscroll-10.html to make any/all local links work with animation.
Here it is , scrolls to the bottom of the page since your contact form is there:
jQuery(function () {
jQuery('#nav1 li.menu2').click(function (e) {
jQuery("html, body").stop().animate({
scrollTop: jQuery(document).height()
}, 1000);
e.preventDefault();
return false;
});
});
I am trying to make a carousel of sorts. I am kind of stuck with hiding and displaying the next and precious buttons once a div moves to the far left and right of its container.
I think i have everything correct regarding calculating the widths but for some reason when you click the buttons, elements stay hidden irrespective of the conditional comments which should dictate when they should be hidden or shown.
Here is a link to what i have thus far. Click the MoveLeft and MoveRight buttons. http://www.ehbeat.com/test/
<script type="text/javascript">
$(document).ready(function () {
//Check width of Gallery div
var galleryWidth = $("#Gallery").innerWidth();
//Check width of GalleryItem
var galleryItemWidth = $(".GalleryItem").innerWidth();
//Check distance from left
var position = $('.GalleryItem').position();
var galleryItemLeft = position.left;
$(".MoveRight").click(function () {
$(".GalleryItem").animate({
"left": "+=50px"
}, "slow");
$(".GalleryItem2").animate({
"left": "+=100px"
}, "slow");
});
$(".MoveLeft").click(function () {
$(".GalleryItem").animate({
"left": "-=50px"
}, "slow");
$(".GalleryItem2").animate({
"left": "-=100px"
}, "slow");
});
$(".Controls").live('click', function () {
if (galleryItemLeft >= "0") {
$('.MoveRight').hide();
}
else {
$('.MoveRight').show();
}
});
if (galleryItemWidth == galleryWidth - galleryItemWidth) {
$('.MoveLeft').hide();
}
});
</script>
It looks like you setup all of your variables inside the $(document).ready() call.
This means that while they're being set on load, they're not getting updated with each click.
Your galleryItemLeft, galleryItemWidth and galleryItemWidth variables need to be updated on each click, so I'd recommend re-assigning the values in each click (by moving the assignment into the live functions)
Edit Also, as your last if statement is excluded from any click function, it'll need to be relocated to inside the live click events as well.
-Chris
Chris is right, code should look like this:
$(".Controls").live('click', function() {
position = $('.GalleryItem').position();
galleryItemLeft = position.left;
if(galleryItemLeft > "0") {
$('.MoveRight').hide();}
else{
$('.MoveRight').show();
}
if(galleryItemWidth == galleryWidth - galleryItemWidth) {
$('.MoveLeft').hide();
}
});