jQuery hide div, remove background and change page width on click - javascript

I'm trying to hide a div on click (well i'm trying to slide it to the left), but what it will have to do is also from the main page div swap the background and also i think, swap the width of another div. I've got it swapping the background and removing the things I don't want (although they slide down rather then to the left)
This video shows what happens (and then at the end i use firebug to show you what i want to happen) http://www.youtube.com/watch?v=tti_L_ofelg&feature=youtu.be (edit: video online now)
Here is my html for the sliding div:
The CSS:
.slidingDiv {
}
.show_hide {
display:none;
}
And the jQuery:
var defOpen = 1;
jQuery(".slidingDiv").show();
jQuery(".show_hide").show();
jQuery('.show_hide').click(function(){
if(defOpen == 1)
{
jQuery(".show_hide").show();
jQuery("#bgwrap").css("background","url(assets/stripeclear.png) fixed 0 0 repeat-y")
jQuery("#primary_right").css("width","")
jQuery(".slidingDiv").slideToggle();
defOpen = 0
} else {
jQuery(".show_hide").show();
jQuery("#bgwrap").css("background","url(assets/stripe.png) fixed 0 0 repeat-y")
jQuery(".slidingDiv").slideToggle();
defOpen = 1
}
So it's bgwrap that has the image in it that i have to swap to a clear one (to stop it being there as it's a fixed image on the left)
and primary_right seems to be the one when I remove the width goes full screen (what i'm really trying to acheive)
It also needs to be able to toggle closed and open!
Thanks for any help you can give!

question is not clear..but as far as i understood...you want to hide a left side division by which the right side division occupies full screen and vice versa..is it?????
if yes defOpen variable will not help u..use JQuery toggle function...datz the best way to do it...

I think you need to set the width to "inherit". That's essentially what you're doing when you are selecting the delete style in Firebug.
jQuery("#primary_right").css("width","inherit")

Related

strange behaviour while sliding images on carousel

I made a jsfiddle so you can reproduce the bug:
FIDDLE
I implemented a carousel to display 3 images. There's a current image (the image being displayed) and the other two remain hidden until I click one of the lateral arrows, causing the next image to slide from the side overlaying the (now previous) current image.
I've been 2 hours trying to figure out why there are certain specific 'transitions' in which the animation doesn't seem to work. For example, when clicking the left arrow to pass from the first image to the second and from the second to the third the animation works fine, but when clicking it again, the transition from 3 to 1 doesn't perform the slide animation. When moving in the opposite direction (using the right arrow) only one transition is animated. I think the problem has to do with that if in the click event handler function, but couldn't spot what's causing it.
Any help would be greatly appreciated.
TIA
The underlying issue here is related to the z-order of the three images. Your slide animations are only showing up where the image being slid in is above the displayed image; the "broken" transitions are actually occurring, they're just obscured by the "higher" visible image.
You can fix this by explicitly setting the z-index of the new and current image. For example, on the right transition:
prevLandscape.zIndex(1);
currLandscape.zIndex(0);
If you do this, you'll also need to increase the z-index of the arrows so they're above the images.
Fiddle
jsfiddle
The issue is with the hide method you just simply hide it add the slide transition for the hide method.
change this line currLandscape.hide(); to currLandscape.hide("slide");
there seemed to be a problem with the order of the images also. please try this code out. The code is reuse of the previous image arrow code. Just try it out.
$('.arrowRight').on('click',function(e) {
var currLandscape = $(this).siblings(".currImg");
var nextLandscape = currLandscape.nextAll(".hiddenImg").first();
var currDesc= $(".currDesc");
var nextDesc= currDesc.nextAll(".hiddenDesc").first();
if (nextLandscape.length == 0) {
nextLandscape = currLandscape.siblings('.hiddenImg').first();
}
if (nextDesc.length == 0) {
nextDesc= currDesc.siblings('.hiddenDesc').first();
}
nextLandscape.show("slide", { direction: "right" }, 400, function() {
currLandscape.hide("slide");
});
currDesc.fadeOut().removeClass('currDesc').addClass('hiddenDesc');
nextDesc.fadeIn().removeClass('hiddenDesc').addClass('currDesc');
currLandscape.removeClass('currImg').addClass('hiddenImg');
nextLandscape.removeClass('hiddenImg').addClass('currImg');
});

Change background image smoothly

I tried to make changing background effect append to the body when page scrolls within specific amount which scroll at 50%,20%,10% rate of page
Here is what i got so far Full Screen Fiddle
Below is the sample code :
HTML :
<div>
<p>...</p>
<!-- more <p> elements below -->
</div>
And the script :
jQuery(window).scroll(function () {
var JarakScroll = 200; // jarak scrol
var JumlahJarakPasScroll = jQuery(window).scrollTop();
if (JumlahJarakPasScroll > JarakScroll) {
jQuery('html').addClass('scrolled');
} else {
jQuery('html').removeClass('scrolled');
}
});
The background was changing but with no effect, anyone can help applying nice effect ?
If you want the background image to change with a nice effect it might be better if you have the background images applied to two divs that have 100% width and 100%height of the body and are placed correctly with z-index.
More specifically, place the first div on top of the second div and when you want the background image to change, fadeOut the first div. That'll be a neat effect. I'm assuming you can code this on your ownn.

Modify Sidenavigation Which Highlights Which Part of Page is Viewed

I currently have a sidenavigation bar which continually checks the users scroll position and if it is greater than a specified .slide height, it adds a class .current to a certain div on a sidebar making it turn orange and thus indicates which part of a page the user is on. Right now, the code only works for one specific height of .slide but I would like to modify it so that each slide (i.e. slide red, slide green, slide blue which are the divs with the colored background) can be of different heights since my content for each section will vary in length.
The fiddle can be found here
JavaScript:
$(document).scroll(function() {
if($(window).scrollTop() > $('.slide').height()*$('.current').index()){
$('.current').removeClass('current');
var newSlide = Math.floor($(window).scrollTop() / $('.slide').height());
$('.sidenavigation li:eq('+newSlide+')').addClass('current');
}
if($(window).scrollTop() < $('.slide').height()*$('.current').index()){
$('.current').removeClass('current');
var newSlide = Math.floor($(window).scrollTop() / $('.slide').height());
$('.sidenavigation li:eq('-newSlide-')').addClass('current');
}
});
I was trying to help you with your code and then i realize how hard it is, so I know it is probably not what you really want, but I recommend you a great jQuery plugin, which will solve your problem very fast: http://imakewebthings.com/jquery-waypoints/

Sliding with jQuery - animate() method

I am currently using the following code to (at least visually) replace the contents of a div, whose id is 'box3' (by hiding the current content and showing the new content) but by making the new content slide into appearance (the old content is just hidden without sliding).
var tabIndex = 1;
function nextButtonClick() {
$("#box3").hide();
$(".tab" + tabIndex).hide();
$(".tab" + (tabIndex + 1)).show();
$("#box3").animate({ width: 'toggle' });
tabIndex++;
}
The problem is that this method makes the new content slide from left to right, whereas I want to slide right to left. I have tried looking around for how to change the slide direction, but nothing seems to work; it normally just makes all content disappear, leaving 'box3# visually empty.
(I am using this code as regular Javascript by the way; it is not within the 'ready' function.)
Can anyone suggest anything? Thanks, Conor.

Solving scrolling element inside below div (under screen) - I want to have it fixed after scrolling

I do not know how to solve this situation:
I`ve got the html/css looks like this:
Image showing how my css/html looks like and what is displayed on the screen after landing on page:
The when I scroll down I see green element:
scrolling down ->
After continuing to scrolling down I saw full green element and the if I scroll down I want to have this element like in css language: position fixed bottom 0. See image below:
I ve saw full element -> same link but image called problem3.png
and then I scroll below and I want to have it fixed at the bottom of the page, like on this image:
Fixed element on screen - What I want and I do not know how to do that -> same link but image called problem4.png (stupid spam prevention mechanism)
Is it possible to solve this situation ?
To sum up: I`ve got two divs, one above and second below, Wheen I scroll down I suddenly see another element (green div) and when i continue to scroll down I WANT TO HAVE THIS GREEN DIV FIXED AT THE BOTTOM OF THE PAGE.
Ofcourse, when I scroll up (back on the top) I want to "park" that green div at the top of the second div.
Is there any way to solve this situation with jQuery (Javascript) / html / css ?
Thank you in advance
I think you'll have to show some of your html structure. There are lots of ways to achieve this kind of effect. Fundamentally, in javascript terms you'll be looking to:
Add an event listener to the window scroll that checks whether the green element is fully in view
If it is in view, add a class (or change it's css) that fixes it's position where you want
Change your window scroll method so that it's checking the relative offset of the red div to the top of the screen. If it goes below the position where the green div should be fixed, remove the class you added earlier.
That sounds complicated, but it's not too bad. The javascript would be something like:
$(function() {
$(window).scroll(function() {
if($(".divToFix").hasClass("fixedAtBase")){
if(Utils.underView($(".redDiv"), $(".divToFix").height())) $(".divToFix").removeClass("fixedAtBase");
} else {
if(Utils.inView($(".divToFix"))) $(".divToFix").addClass("fixedAtBase");
}
});
});
Utils = {
underView: function(element, offset) {
return (($(window).height() + $(window).scrollTop() - offset) <= element.offset().top);
},
aboveView: function(element) {
return ($(window).scrollTop() >= element.offset().top + element.height());
},
inView: function(element) {
return (Utils.aboveView(element) !== true && Utils.underView(element, element.height()) !== true);
}
};
Bear in mind I've not tested that or anything.
edit - here's a demo

Categories