Develop Reference

Horizontal Scroll Positioning

I want my scrollbar to auto-position to my clicked button inside of my div. Code below
HTML:
<div class="headmenu">
<div class="divdivitems">
<a class="ui button" id="cat1" onclick="myCat(this.id);">
<img src="../css/images/fishiii.png" class="heightwidth padding5">
</a>
<a class="ui circular image border1px margin33 foodicon heightwidth bordergray bgwhite" id="cat2">
<img src="../css/images/porki.png" class="heightwidth padding5">
</a>
<a class="ui circular image border1px margin33 foodicon heightwidth bordergray bgwhite" id="cat3">
<img src="../css/images/beefi.png" class="heightwidth padding5">
</a>
<a class="ui circular image border1px margin33 foodicon heightwidth bordergray bgwhite" id="cat4">
<img src="../css/images/chicken.png" class="heightwidth padding5">
</a>
<a class="ui button" id="cat5">
<img src="../css/images/saladi.png" class="heightwidth padding5">
</a>
<a class="ui circular image border1px margin33 foodicon heightwidth bordergray bgwhite" id="cat6">
<img src="../css/images/pasta.png" class="heightwidth padding5">
</a>
</div>
</div>
CSS:
Headmenu has position:fixed, overflow-x:auto and overflow-y:hidden.
Divdivitems has 750px width specified overflow-y:hidden and position:relative
I tried using
$('#cat5').click(function() {
event.preventDefault();
$('#headmenu').animate({
marginLeft: "-=200px"
}, "fast");
});
But it's not working. I want my scrollbar to horizontally position on my clicked button, category. thank you

Instead of margin-left use .scrollLeft(400); and .scrollTop(400);.
Here's a JSFiddle:
http://jsfiddle.net/Delorian/9k0wyzod/

Javascript load content into div

I'm trying to make a page that loads custom content into a div based on a click in an image map.
This is just some of the code, but the problem is that the content in the div with ID piece does not change when I click the link with ID dec.
I have tried normal links and many other techniques, but can't seem to get it working.
Appreciate all help!
<map name="cake_01Map">
<area shape="poly" coords="249,246,250,25,130,46,249,246" href="#" alt="Desember" id="dec">
<area shape="poly" coords="365,47,250,246,252,23" href="#" alt="Januar" id="jan">
<area shape="poly" coords="448,134,252,251,368,49" href="#" alt="Februar" id="feb">
</map>
<div class="container">
<div class="row">
<div class="col c4" id="piece">Content here</div>
<div>
<img src="img/kake_01.png" alt="" width="500" height="500" usemap="#cake_01Map" id="cake_01" />
<img src="img/kake_02.png" width="500" height="500" alt="" usemap="#cake_01Map" id="cake_02" />
</div>
</div>
</div>
<script>
$('#dec').click(function() {
$('#piece').html('Content December');
});
$('#jan').click(function() {
$('#piece').html('Content January');
});
$('#feb').click(function() {
$('#piece').html('Content February');
});
</script>

jQuery automatic scroll through images

I'm creating a simple little slideshow for a site I'm designing for a friend. So far I have it to work just perfectly via clicking images to show / hide the respective image. I'm trying to get it to automatically scroll through the images but it won't seem to work. Here's my code:
<script type="text/javascript">
$(function() // run after page loads
{
$('.slide1t').show();
$('.slide2').click(function()
{
$('.slide2t').show();
$('.slide1t').hide();
$('.slide3t').hide();
$('.slide4t').hide();
});
$('.slide1').click(function()
{
$('.slide1t').show();
$('.slide2t').hide();
$('.slide3t').hide();
$('.slide4t').hide();
});
$('.slide3').click(function()
{
$('.slide3t').show();
$('.slide1t').hide();
$('.slide2t').hide();
$('.slide4t').hide();
});
$('.slide4').click(function()
{
$('.slide4t').show();
$('.slide1t').hide();
$('.slide2t').hide();
$('.slide3t').hide();
});
});
</script>
This is the code i'm using to hide/show images when clicked. Could this be shortened using toggle?
This is what i've tried to get them automatically scrolling:
<script type="text/javascript">
$(function() // run after page loads
{
$('.slide1t').show([1000]),
$('.slide1t').hide(),
$('.slide2t').show([1000]),
$('.slide21t').hide(),
$('.slide3t').show([1000]),
$('.slide3t').hide(),
$('.slide4t').show([1000]),
$('.slide4t').hide()
});
</script>
I've tried other aspects of this same code to try and get it to do something, but to no anvil.
<div id="slideshow">
<div class="text">
<a class="slide1" href="#"><img src="images/1.png" width="240" height="60" /></a>
<a class="slide2" href="#"><img src="images/2.png" width="240" height="60" /></a>
<a class="slide3" href="#"><img src="images/3.png" width="240" height="60" /></a>
<a class="slide4" href="#"><img src="images/4.png" width="240" height="60" /></a>
</div>
<div class="image">
<a class="slide1t" href="#"><img src="images/image1.png" width="525" height="210" /></a>
<a class="slide2t" href="#"><img src="images/image1.png" width="525" height="110" /></a>
<a class="slide3t" href="#"><img src="images/image1.png" width="525" height="170" /></a>
<a class="slide4t" href="#"><img src="images/image1.png" width="525" height="190" /></a>
</div>
</div>
I've looked into the documentation and saw you can use .show([duration],[easing],[callback]) but I don't really know what to input into them.
Thanks all

Are you making a slideshow where you can see to previous and next slide to the left and right of the current slide, or just one slide fading into another?
If it's the latter you can use this very simple code for doing this.
HTML:
<div class="image">
<img src="images/image1.png" />
<img src="images/image2.png" />
<img src="images/image3.png" />
<img src="images/image4.png" />
</div>
CSS:
.image
{
position:relative;
}
.image img
{
position:absolute;
top:0;
left:0;
}
jQuery:
$(function() {
$('.image img:gt(0)').hide(); // to hide all but the first image when page loads
setInterval(function()
{
$('.image :first-child').fadeOut(1000)
.next().fadeIn(1000).end().appendTo('.image');
},5000);
}
This basically shuffles the images like a pack of cards. 5000 (5 seconds) is the interval between fading, 1000 (1 second) is the speed of the fading animation.
For this to work however you must use position:relative on the containing div and position:absolute to position the images on top of each other.
jsFiddle demo

The thing is, .show is async. So your javascript will continue will it does the effect. That's what the third parameter is for, it's an anonymous function that will get called when the effect has finished.
You should look into a jquery plugin, making this things yourself is wasting time. There are hundreds of these plugins so there is always one fitting your needs.
For example: http://www.1stwebdesigner.com/css/fresh-jquery-image-gallery-display-solutions/

You can do this:
$('.image a').each(function (index) {
$(this).show(1000, function () {
$(this).delay(index * 1000).hide(1000);
});
});
FIDDLE DEMO

If you don't want to change your structure much and still want to retain the click function, you can do something like this
This is similar to your original approach but is based in a function and element's siblings instead of doing each image individual. This is optimized for adding new elements easily and retaining functionality. I used a setInterval to loop the animation function as well
HTML (changed slightly)
<div id="slideshow">
<div class="text"> <a id='one' href="#"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e4/Small-city-symbol.svg/348px-Small-city-symbol.svg.png" width="240" height="60" /></a>
<a id='two' href="#"><img src="https://si0.twimg.com/profile_images/604644048/sign051.gif" width="240" height="60" /></a> <a id='three' href="#"><img src="https://g.twimg.com/business/page/image/11TwitterForSmallBusiness-300_1.png" width="240" height="60" /></a> <a id='four' href="#"><img src="https://si0.twimg.com/profile_images/2204583306/fb_logo.png" width="240" height="60" /></a>
</div>
<div class="image"> <a id='one' href="#"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e4/Small-city-symbol.svg/348px-Small-city-symbol.svg.png" width="525" height="210" /></a>
<a id='two' href="#"><img src="https://si0.twimg.com/profile_images/604644048/sign051.gif" width="525" height="110" /></a>
<a id='three' href="#"><img src="https://g.twimg.com/business/page/image/11TwitterForSmallBusiness-300_1.png" width="525" height="170" /></a>
<a id='four' href="#"><img src="https://si0.twimg.com/profile_images/2204583306/fb_logo.png" width="525" height="190" /></a>
</div>
</div>
CSS:
.image a:not(#one) {
display:none;
}
javascript:
$('.text a').click(function () {
var idName = $(this).attr('id');
$('.image a').each(function () {
if ($(this).attr('id') === idName) $(this).show(1000);
else {
$(this).hide(1000);
}
});
window.clearInterval(loop);
loop = self.setInterval(function () {
autoChangeSlide()
}, 5000);
});
function autoChangeSlide() {
var elem;
$('.image a').each(function () {
if ($(this).is(':visible')) elem = $(this);
});
if (elem.attr('id') != $('.image').children('a').last().attr('id')) {
elem.hide(1000).next().show(1000);
} else {
elem.hide(1000).parent().children('a').first().show(1000);
}
}
var loop = self.setInterval(function () {
autoChangeSlide()
}, 5000);
You can combine my solution with Dolchio's to make it particularly awesome

Making a div appear and disappear

I have 8 thumbnail pictures and I want to make a slider appear when I click on one of them. I tried pretty much everything I know and here it is:
HTML:
<div id="divThumbnails2" class="thumbnails2">
<a href="#" id="Thumb5" >
<img src="images/thumbnail_5.png" width="55" height="66" alt="" class="floatleft" /></a>
<a href="#" id="Thumb6">
<img src="images/thumbnail_6.png" width="56" height="67" alt="" class="floatleft"
style="margin-left: 7px;" /></a>
<a href="#" id="Thumb7">
<img src="images/thumbnail_7.png" width="54" height="66" alt="" class="floatleft"
style="margin-left: 7px;" /></a>
<a href="#" id="Thumb8">
<img src="images/thumbnail_8.png" width="57" height="68" alt="" class="floatleft"
style="margin-left: 7px;" /></a>
</div>
<div id="divThumbnails" class="thumbnails">
<div id="Thumb1" class="floatleft" >
<a href="#">
<img src="images/thumbnail_1.png" width="54" height="65" alt=""/></a>
</div>
<div id="Thumb2" class="floatleft" style="margin-left: 7px;" >
<a href="#">
<img src="images/thumbnail_2.png" width="56" height="66" alt="" /></a>
</div>
<div id="Thumb3" class="floatleft" style="margin-left: 7px;" >
<a href="#">
<img src="images/thumbnail_3.png" width="54" height="66" alt="" /></a>
</div>
<div class="floatleft" style="margin-left: 7px;" id="Thumb4">
<a href="#">
<img src="images/thumbnail_4.png" width="57" height="68" alt="" /></a>
</div>
</div>
And the slides:
<div id="slides">
<div class="slides_container" id="SlidesContainer">
<img src="images/slides_1.png" width="408" height="266" alt="" />
<img src="images/slides_2.png" width="408" height="272" alt="" />
<img src="images/slides_3.png" width="408" height="275" alt="" />
</div>
<a class="prev" href="#"><img width="28" height="27" alt="Arrow Prev" src="images/slides_left_arrow.png"/></a>
<a class="next" href="#"><img width="28" height="27" alt="Arrow Next" src="images/slide_arrow_right.png"/></a>
<div class="close_btn" id="Btn_Close"><img src="images/slide_close_btn.png" width="28" height="27" alt="Close" /></div>
</div>
The JavaScript:
<script type="text/javascript">
var close = document.getElementById('Btn_Close');
var slides = document.getElementById('slides');
close.onclick = function () {
slides.style.display = "none";
};
</script>
<script type="text/javascript">
var thumb1 = document.getElementById('Thumb1');
var slides = document.getElementById('slides');
thumb1.onclick = function () {
slides.style.display = "block";
};
</script>
<script type="text/javascript">
var thumb2 = document.getElementById('Thumb2');
var slides = document.getElementById('slides');
thumb2.onclick = function () {
slides.style.display = "block";
};
</script>
<script type="text/javascript">
var thumb3 = document.getElementById('Thumb3');
var slides = document.getElementById('slides');
thumb3.onclick = function () {
slides.style.display = "block";
};
</script>
<script type="text/javascript">
var thumb4 = document.getElementById('Thumb4');
var slides = document.getElementById('slides');
thumb4.onclick = function () {
slides.style.display = "block";
};
</script>
<script type="text/javascript">
var thumb5 = document.getElementById('Thumb5');
var slides = document.getElementById('slides');
thumb5.onclick = function () {
slides.style.display = "block";
};
</script>
<script type="text/javascript">
var thumb6 = document.getElementById('Thumb6');
var slides = document.getElementById('slides');
thumb6.onclick = function () {
slides.style.display = "block";
};
</script>
<script type="text/javascript">
var thumb7 = document.getElementById('Thumb7');
var slides = document.getElementById('slides');
thumb7.onclick = function () {
slides.style.display = "block";
};
</script>
<script type="text/javascript">
var thumb8 = document.getElementById('Thumb8');
var slides = document.getElementById('slides');
thumb8.onclick = function () {
slides.style.display = "block";
};
</script>
Everything's fine with the slides_container when I click my arrows it changes my picture but I have to initially set its display property to "block" and I want to set it to 'none' because I want it to appear only when I click on one of the thumbnail pictures.
It works with the close button when I click on it the slides_container div disappears (I guess I'm doing something right) but I can't seem to get it to appear when I click on the others. Any help is appreciated.

This function will set your display property to the opposite of what it currently is (on vs off). Change 'toggle' to your element id that you want to toggle on/off.
<script type="text/javascript">
function toggle(){
var off=document.getElementById('toggle');
if (off.style.display == "none") {
off.style.display = "block";
} else {
off.style.display = "none";
}
}
</script>
Lastly, if you want to toggle more elements, you can always create additional variables. If you want more "switches", then create another element with another onclick action, pointing to another function that toggles the additional element id.
Hope that helps.

Try
<div id="slides" style="display: none"> <!-- set display to none -->
<div class="slides_container" id="SlidesContainer">
<img src="images/slides_1.png" width="408" height="266" alt="" />
<img src="images/slides_2.png" width="408" height="272" alt="" />
<img src="images/slides_3.png" width="408" height="275" alt="" />
</div>
<a class="prev" href="#"><img width="28" height="27" alt="Arrow Prev" src="images/slides_left_arrow.png"/></a>
<a class="next" href="#"><img width="28" height="27" alt="Arrow Next" src="images/slide_arrow_right.png"/></a>
<div class="close_btn" id="Btn_Close"><img src="images/slide_close_btn.png" width="28" height="27" alt="Close" /></div>
</div>
Update
You can simplify the script a lot
<script type="text/javascript">
var slides = document.getElementById('slides');
var close = document.getElementById('Btn_Close');
close.onclick = function () {
slides.style.display = "none";
};
function showSlide(){
slides.style.display = "block";
}
Add an onclick event to the thumb elements:
<div id="Thumb1" class="floatleft" onclick="showSlide()">
<a href="#">
<img src="images/thumbnail_1.png" width="54" height="65" alt=""/></a>
</div>

I have a popup div with more than one span element how to display another span

I have a popup div with more than one span element how to display another span
javascript
$(document).ready(function() {
$(".levert").click(function () {
$("#popUpDiv").show("slow");
});
});
HTML
<div id="popUpDiv" style="display:none">
<img src="logo_klein.png" width="117" height="33" class="logoklein1" ><p
id="headertextbox">is</p></img>
<span class="textbox1"></span>
<span class="textbox2"></span>
<span class="textbox3"></span>
</div>
</div>
Imagemap with links
<img id="logo" src="./logo.png" alt="Phlox" usemap="#links"></img>
<map name="links">
<area shape="circle" coords="291,46,46" href="#" class="levert"></area>
<area shape="circle" coords="55,245,46" href="#" class="is"></area>
</map>

Do this when you want to clear popupDiv and add span with class textbox2
$("#popUpDiv").empty().append('.textbox2').show("slow");