We Keep Coding

Scrolling div horizontally

How can I make this scroll left or right using navigation button?
<div class="slider-wrap">
<div class="slide-wrap">
<div class="slider-slide-wrap"></div>
<div class="slider-slide-wrap"></div>
<div class="slider-slide-wrap"></div>
</div>
</div>
<div id="slider-left" class="slider-nav"></div>
<div id="slider-right" class="slider-nav"></div>
JS
$("#slider-left").click(function(){
alert("< clicked.");
});
$("#slider-right").click(function(e){
alert("> clicked.");
$('.slide-wrap').scrollLeft(5000);
});
Fiddle

You are selecting the wrong <div>. Note the selector: $('.slider-wrap') (not .slide-wrap).
$("#slider-left").click(function () {
$('.slider-wrap').animate({
scrollLeft: 0
}, 200);
});
I have used .animate because you get visual feedback about what's happening (so I think using animate is better for UX). This would work equally well with .scrollLeft() though:
$("#slider-left").click(function () {
$('.slider-wrap').scrollLeft(0);
});
See it working in a fiddle

How to change Iframe height when clicked on button inside the iframe's content

Right now i want to make a simple jQuery function so when this function is called the iframe height is changing.
Here is my code:
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
function ChangeHeightF1()
{
$("#inneriframe").css({"height":"350px;"});
alert('The height was changed!');
}
</script>
<div id="outerdiv">
<iframe src="http://beta.sportsdirect.bg/checkout/onepage/" id="inneriframe" scrolling="no" target="_parent"></iframe>
</div>
Here is the code of the button which is in the content of the iframe:
<button type="button" onclick="parent.ChangeHeightF1();">Click me to change Height!</button>
So my questions is how it's possible to change the iframe height on button click inside the content which is holding the iframe.
Also what CSS i have to place on "outerdiv" div element so when the iframe height is changing it will change the height of the div holding the iframe as well ?
Thanks in advance!

You can use window.parent.document as a context in jQuery selector, and then manipulate CSS values.
$(":button").click(function(){
$('#inneriframe, #outerdiv', window.parent.document).css({"height":"350px"});
})

This should work. If you want to re size back to previous height, let me know.
http://jsfiddle.net/ko3pyy8c
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
$('#more').click(function(){
$('#inneriframe').animate({height:'500px'}, 500);
$('#more').text('Go Back');
});
});
</script>
<style type = "text/css"/>
#inneriframe {
height: 350px;
overflow: hidden;
}
</style>
<div id="outerdiv">
<iframe src="http://beta.sportsdirect.bg/checkout/onepage/" id="inneriframe" scrolling="no" target="_parent"></iframe>
</div>
<br/>
Change Height

it can help you
<a href='#'>click me</a>
<div id="outerdiv">
<iframe src="http://beta.sportsdirect.bg/checkout/onepage/" id="inneriframe" scrolling="no" target="_parent"></iframe>
by using jquery
$('a').click(function(){
$('iframe').css('height','600px');
});

Position After JQuery animation

I have 4 div on my page, 2 little div on the center of the page and 2 big div outside the page. When i clicked the left little div, the whole page move left and pull the big div from the left. Same with the right little div. Because i have some hover effect on my little divs, after i pull the big div outside the window, the hover effect will act again.
Do i need to set their CSS after the animation finish to make sure the little div has moved out of the window?
here is the code
<div id="little_left">
<div id="upper">
<img src="" alt="imge"/>
<p>left</p>
</div>
<div id="bottom">
</div>
</div>
<div id="big_left">
</div>
<div id="little_right">
<div id="upper">
<img src="" alt="right"/>
<p>right</p>
</div>
<div id="bottom">
</div>
</div>
<div id="big_right">
</div>
Then the JS code ( now with the hover effect )
$("#little_left").animate({"left":"0"},1000,function(e){
$(this).hover(function(e){
$(this).css("z-index",$("#little_right").css("z-index")+1);
$(this).stop(true, false).animate({"top":"50",
"left":"250",
"width":"500",
"height":"500",
"border-radius":"15"
},500);
},function(e){
$(this).stop(true, false).animate({"top":"20",
"left":"0",
"width":DivWidth,
"height":DivHeight,
"border-radius":"0"
},250,function(e){
$(this).css("z-index",$("#little_right").css("z-index")-1);});
});
});
$("#little_right").animate({"right":"0"},1000,function(e){
$(this).hover(function(e){
$(this).css("z-index",$("#little_left").css("z-index")+1);
$(this).stop(true, false).animate({"top":"50",
"right":"250",
"width":"500",
"height":"500",
"border-radius":"15",
},500);
},function(e){
$(this).stop(true, false).animate({"top":"20",
"right":"0",
"width":DivWidth,
"height":DivHeight,
"border-radius":"0"
},250,function(e){
$(this).css("z-index",$("#little_left").css("z-index")-1);});
});
});
$("#little_left").click(function(e) {
$(this).animate({"left":-DivWidth},500);
$("#little_right").animate({"left":-winWidth},1000);
$("#big_left").animate({"left":"0"},1000);
});
$("#little_right").click(function(e) {
$(this).animate({"right":-DivWidth},500);
$("#little_left").animate({"left":winWidth},1000);
$("#big_right").animate({"left":"0"},1000);
});
CSS the 2 big div are outside the window , only 2 little divs are shown inside the window

multiple show hide toggle with div sliding out

I am new to coding and need help with jQuery. I have 2 <div>s (one with an image, the other with a menu list, both 50% width) and I need to be able to click one of the menu options to make a new div (50% width) appear from the right while reducing the other 2 divs width to 25% each. Then clicking on the same menu option to hide the new div and revert back to the original widths. But if I click on another menu option while the new div is visible, I need it to change the content to that specific menu option content.
How can I swap the left-hand <div> out with jQuery?
Here's the HTML I'm working with:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<!-- SCRIPT FILES -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="script.js"></script>
<!-- CSS STYLESHEETS -->
<link rel="stylesheet" href="reset.css" type="text/css" />
<link rel="stylesheet" href="main.css" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header">
</div><!--header-->
<div id="container">
<div class="box-container">
<div class="box1">
<img src="images/Untitled-1.png" alt="logo">
</div>
<div class="box2">
<div id="nav">
<ul>
<li><a>hello!</a></li>
<li><a>ADVERTISING</a></li>
<li><a>DESIGN</a></li>
<li><a>ABOUT</a></li>
<li><a>BLOG</a></li>
<li><a>SHOP</a></li>
</ul>
</div><!--nav-->
</div><!--box2-->
<div class="box3">
<div id="ADVERTISING" class="content">ADVERTISING</div>
<div id="DESIGN" class="content">DESIGN</div>
<div id="ABOUT" class="content">ABOUT</div>
<div id="BLOG" class="content">BLOG</div>
<div id="SHOP" class="content">SHOP</div>
</div>
</div><!--box-container-->
</div><!--container-->
<div id="footer">
</div><!--footer-->
</div><!-- wrapper-->
</body>
</html>​
Here's a working jsFiddle with the styles: http://jsfiddle.net/YcphY/6/

For starters, here's a method that ties the below examples of how to do this into the animation you're after:
$(function() {
$("#nav").delegate("li","click", function() {
var newDiv = $(".box3 .content").eq($(this).index()-1);
newDiv.siblings().hide().end(); // hide the others
if(newDiv.is(":visible")) {
// if shown, fade it out, when the fade finishes, slide everything back
newDiv.fadeOut(function() {
$(".box3").hide();
$(".box1, .box2").animate({ width: "50%" });
});
} else {
// if not shown, then slide over space, then fade in
$(".box1, .box2").animate({ width: "25%" }, function() {
$(".box3").show();
newDiv.fadeIn("fast");
});
}
});
});​
Given your current CSS you can do this:
$(function() {
$("#nav").delegate("li a","click", function() {
$(".box3").show();
$("#" + $(this).text()).show().siblings().hide();
});
});​
Here's a working example, though you can see the CSS will need a bit of work to get it going 100%. I suggest a few changes though: give your links and containers matching IDs, like this:
<li><a id="ad">ADVERTISING</a></li>
<div id="ad-container" class="content">ADVERTISING</div>
Then the JS can be:
$(function() {
$("#nav").delegate("li a","click", function() {
$(".box3").show();
$("#" + this.id + "-container").show().siblings().hide();
});
});
Here's a working example of that...it allows you to change the text at will and not worry about the JS breaking later. Another alternative yet is to go off the index of the link in the list using .index() of the <li>, if the number of links was consistent with the <div>s in all cases, even if there's an offset because of the "hello!" link.
Here's an example of an index approach with your current HTML:
$(function() {
$("#nav").delegate("li","click", function() {
$(".box3").show();
$(".box3 .content").hide().eq($(this).index()-1).show();
});
});​

I think jQuery's animate function might be of use to you.
What you'd need to do is either have a hidden div positioned out of the window added to your HTML (or maybe add it dynamically using jquery on document.ready event, if you prefer) and the use the above mentioned animate function to slide it in and out and bind it to the menu item's click function.
Sample Code
$(document).ready(function(){
$('#slide').click(function(){
var hidden = $('.hidden');
if (hidden.hasClass('visible')){
hidden.animate({"left":"-1000px"}, "slow");
hidden.removeClass('visible');
} else {
hidden.animate({"left":"0px"}, "slow");
hidden.addClass('visible');
}
});
});​
Explanation
In the above code we are binding code to the click event of an element with a id "slide". Once the element is clicked the code gets initiated. We check if the .hidden has a css class called "visible". If not we animate the hidden div to slide in. and if it has a visible class then slide it out.
Working Fiddle
Here is a working JSFiddle for you
Some pointers
In the hidden div's CSS remember to specify a z-index greater than that of the current left panel.
In the hidden div's CSS remember to set position to absolute and left to around -1200px (or greater than window.width() to make it work on all screen sizes.)

javascript / Jquery .slideToggle - page does not scroll with content

I am using .slideToggle - Jquery to create an accordion and It works so far.
However, When div#slickbox goes down or up the page does not scroll with it. The page maintain scroll position.
I have 2 huge images(700px x 1300px) inside div#slickbox.
I want to scroll the page with the content, down & up.
How can I do this?
Thank you!
jquery
$('#slickbox').hide();
$('.more a').click(function() {
$('#slickbox').slideToggle(3200);
return false;
});
HTML
<div id="slickbox">
<div id="slide_show">
<div id="slider">
<ul>
<li>
<img alt="figure 1" src="images/fig1.jpg" width="700" height="1300">
</div><!-- End slide_show -->
</div><!-- End slickbox -->
<div class="donate done">
<h3 class="more"> More </h3>
</div> <!-- End button-->

You can store the .height() of the #slickbox element then use that as the animation for scrollTop, like this:
var height = $('#slickbox').hide().height();
$('.more a').toggle(function() {
$('#slickbox').slideDown(3200);
$('html, body').animate({ scrollTop: '+=' + height }, 3200);
return false;
}, function() {
$('#slickbox').slideUp(3200);
$('html, body').animate({ scrollTop: '-=' + height }, 3200);
return false;
});​
You can give it a try here, this will cause the page to scroll down the same number of pixels it expanded because of the images, and at the same rate since it has the same duration.