I am trying to set my website's side menus fixed when you scroll the windows more than a specific number. The menus are working fine and they get fixed after scroll. This is OK but the problem is after scroll they should collapse and when you click on them they should extend but this doesn't happen! I mean it works sometimes and sometimes it doesn't! I am using addClass() to add the fixed class to the menus!
$(window).scroll(function() {
if ($(window).scrollTop() > (rightHeight + $('.header-wrapper').height() + $('.top-wrapper').height() + $('.back-picture').height()) + 300) {
$('.login-fixed').fadeIn(100);
$('.col-content').css('margin-right', '15%');
$('.right-side').addClass('fixed');
$('.right-side').children('.side-widget').addClass('side-widget-fixed');
$('.right-side').children('.side-widget').click(function() {
if ($('.right-side').children().hasClass('open')) {
if ($(this).hasClass('open')) {
$(this).toggleClass('open');
} else {
$('.right-side').children().removeClass('open');
$(this).toggleClass('open');
}
} else {
$(this).toggleClass('open');
}
});
} else {
$('.col-content').css('margin-right', 0);
$('.right-side').removeClass('fixed');
$('.right-side').children('.side-widget').removeClass('side-widget-fixed');
$('.login-fixed').fadeOut(100);
}
});
I am also trying to handle the click and it means when another menu is extended when you click on a menu the other one collapses and this one opens! I know that maybe my question is a little confusing but I am confused too.
Just for more info I should say when I edit the code it works but after refreshing 10 times or scrolling 20 times it corrupts!
Related
I am adding a QapTcha pluggin into my website, I am using jquery.ui.touch-punch.min.js.
However, when I zoom into a page from a mobile site and I drag my slider left, it moves out of the bar, which it isn't supposed to do. I have attached pictures to give an idea of whats going on.
The problem occurs when you zoom into the page and you swipe the scroll bar it moves left out of the page as you can see in the 3rd image. This is my code:
Slider.draggable({
containment: bgSlider,
axis: 'x',
stop: function (event, ui) {
if (ui.position.left > 123) {
Slider.draggable('disable').css('cursor', 'default');
inputQapTcha.val("");
TxtStatus.css({ color: '#307F1F' }).text(opts.txtUnlock);
Icons.css('background-position', '-16px 0');
//form.find('input[type=\'submit\']').removeAttr('disabled');
$(opts.buttonLock).removeAttr('disabled');
///Show a fornm
if ($(opts.buttonLock).attr("show")) {
$($(opts.buttonLock).attr("show")).css("display", "block");
$("#QapTcha").fadeOut(500);
}
else if (opts.buttonLock == 'input[name="SendMail"]') {
$(opts.buttonLock).bind("click", function () {
AuroraJS.Modules.SendMail(this);
});
}
else if (opts.buttonFunc != "") {
$(opts.buttonLock).bind("click", function () {
opts.buttonFunc();
});
}
}
}
});
How I can prevent it from moving out of the bar when the page is zoomed into?
A link to a working example of the issue would help in resolving the issue.
From as far I can see, the only thing I could think of is that something might go wrong with positioning. You could try resolving this by adding position: relative; to the slider container.
I am trying to recreate the header effect on this page
https://staffhub.office.com/
The page doesn't start scrolling till a certain height is scrolled.
And Im guessing the different sections of the header are just animated in everytime you scroll each section.
Im guessing this can be done in Jquery
you guessed right.
$("#idOfScrollingDiv").scroll(scroll1);
function scroll1() {
if($("#idOfScrollingDiv").scrollTop() > $("#breakpointDiv").position() {
$("#idOfScrollingDiv").scroll(scroll2);
}
else {
//desired scroll1 behaviour
//i.e. flip between slides
//and prevent dfault behaviour
}
}
function scroll2() {
if($("#idOfScrollingDiv").scrollTop() <= $("#breakpointDiv").position() {
$("#idOfScrollingDiv").scroll(scroll1);
}
else {
//normal scrolling
}
}
I have multiple clickable panels made with Bootstrap class panel, organized in this way:
Image of my website naoh
For example, when I click on the first panel, some other panels appear and cool stuff happens.
When you click a panel.
But I want that the panel that I clicked to be at the center. And then, when that same panel is clicked, I want to return everything to normal (which right now works with the specific panels per panel), including the main panel, so it should move to the left. The panels at the center doesn't require animation, and the right ones should animate to the left and back to the right.
Here is my jQuery code for the panels, lets say panel 2:
//Panel 2
if ($("#panel_2").data("clicked")) {
$(".navegadores").toggle(function () { });
} else {
$(".navegadores").hide();
}
$("#panel_2").click(function () {
$("#panel_2").data('clicked', true);
$(".navegadores").toggle(function () { });
console.log($("#panel_2").data("clicked"));
});
I feel I would need to use the .toggle method somehow, or the .slideToggle, but I'm quite confused atm.
Something like this should get you started:
$('#panel2').click(function(){
if ( $(this).data('clickstate') == 0 ){
$(this).animate({
marginLeft: '200px'
},1000, function(){
$(this).data('clickstate', '1');
});
}else{
$(this).animate({
marginLeft: '0'
},1000, function(){
$(this).data('clickstate', '0');
});
}
});
#panel2{position:relative;height:100px;width:100px;background:green;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="panel2" data-clickstate="0"></div>
I'm attempting to show one div containing a slideshow and hide another containing a list of images generated on larger screens i.e desktops. And do the opposite on smaller screens. Both Div's contain repeater controls, not sure if that interferes in any way but I do not think it does. Not sure why it's not working any suggestions would be very appreciated.
My jQuery and the CSS classes it attempts to implement;
$(function () {
$(window).resize(function () { ToggleSlideshow(); });
ToggleSlideshow();
});
function ToggleSlideshow() {
// Apply your condition here to toggle the visibility of the slide show
if ($(window).width() < 500) {
$("#slideShowContainer").addClass(".hiding");
$("#imgList").addClass(".showing");
} else {
$("#slideShowContainer").addClass(".showing");
$("#imgList").addClass(".hiding");
}
}
.showing{
display:block;
}
.hiding{
display:none;
}
When I say it's not working, what I mean is both are being displayed which is not what I am trying to achieve. To see it live please follow this link.
I got it working in the end. I did as follows:
$(function () {
$(window).resize(function () { ToggleSlideshow(); });
ToggleSlideshow();
});
function ToggleSlideshow() {
// Show your slideshow on widths larger than 500, otherwise show your list of images
$("#<%=slideShowContainer.ClientID%>").toggle($(window).width() >= 660);
$("#<%=imgList.ClientID%>").toggle($(window).width() < 660);
}
ive a problem which is driving me crazy. im trying to explain...
i have a very long scrolling page with about 10 divs, one below the other (no space between).
at the bottom of the viewing port is a button with an id and a position: fixed. when i scroll up or down the button is fixed while the divs move up or down.
i want to have different id's on the button depending on which div layer is in the viewing port. that means if one divlayer fills over 50% of the available space the href of the button should change...
i tried the inview.js, but the problem is, that 2 divs at the same time have the inview class...
my current code:
$('#div4, #div5, #div6').bind('inview', function (event, visible) {
if (visible == true) {
$(this).addClass("inview");
} else {
$(this).removeClass("inview");
}
});
var $div4 = $('#div4');
if($div4.hasClass("inview")){
$('#button1').attr('id', 'button2');
}
you see, every div which is in the viewport the button gets a new id.
has anyone of you a solution?
thanks ted
You can try to remove the inview class before adding it.. Something like this:
var $divs = $('#div4,#div5,#div6';
$divs.bind('inview', function (event, visible) {
$divs.not(this).removeClass("inview");
if (visible == true) {
$(this).addClass("inview");
}
});
Another suggestion is to use the Waypoints plugin and fire when the div crosses the 50% mark.
The only difficult part is that depending on the direction you'll need to select the current div or the one above.
Plugin: http://imakewebthings.com/jquery-waypoints/
Demo: http://jsfiddle.net/lucuma/nFfSn/1/
Code:
$('.container div').waypoint(function (direction) {
if (direction=='up')
alert('hit ' + $.waypoints('above')[$.waypoints('above').length-2].id);
else
alert('hit ' + $(this).attr('id'));
}, {
offset: $.waypoints('viewportHeight') / 2
});