We Keep Coding

issue | JQuery slide forces my page to scroll to the top

This my slide HTML :
<div class="slide_container">
<div class="one_slide">
<img alt="slide_img" class="slide_img img-responsive" src="images/slide2.jpg">
</div>
<div class="one_slide">
<img alt="slide_img" class="slide_img img-responsive" src="images/slide3.jpg">
</div>
<div class="one_slide">
<img alt="slide_img" class="slide_img img-responsive" src="images/slide4.jpg">
</div>
</div>
And the JQuery :
setInterval(function(){
$('.active').removeClass('active').addClass('old_active');
if($('.old_active').is(':last-child')){
$('.one_slide').first().addClass('active');
}
else{
$('.old_active').next().addClass('active');
}
$('.old_active').removeClass('old_active');
$('.one_slide').fadeOut(500);
$('.active').fadeIn(500);
},5000);
This is my JQuery slide, the problem with it is when the image change it's forcing my page to scroll to the top and i don't like this, i searched for the same issue but no result .

Try removing the 'href="#"', this is responsible for the upscrolling!

Dynamically adding slide images inside slider

i am trying to dynamically add images in the slider called owl slider.
The problem is that i want to clear the divs inside the
.owl-wrapper
div and then add new items on a click.
The original code is
<div id="owl-demo" class="owl-carousel owl-theme">
<div class="item">
<img src="../img/car1.jpg" alt="The Last of us">
</div>
<div class="item">
<img src="../img/car2.jpg" alt="The Last of us">
</div>
<div class="item">
<img src="../img/car3.jpg" alt="The Last of us">
</div>
<div class="item">
<img src="../img/car4.jpg" alt="The Last of us">
</div>
</div>
Now i did this
$('.singleNewsItem').click(function () {
$('#owl-demo').append('<div class="item"><img src="../img/trac1.jpg"></div>');
});
});
Somehow its adding the image outside the main slider.
Please help .
thanks.

Try this:
// make sure it's initialized:
// $("#owl-demo").owlCarousel();
$('.singleNewsItem').click(function () {
// clean the container:
$('#owl-demo').text('');
var img = '<div class="item"><img src="../img/trac1.jpg"></div>';
$("#owl-demo").data('owlCarousel').addItem(img);
});
There is a demo with owl manipulation examples.
Demo with transistions.

equial height not working properly?

Hello I have tried doing the equal heights js code but its not working for me somehow,
this is my js fiddle: jsfiddle
I think im missing something with the classes?
Thanks in advance for any help
this is my html:
// equal heights - plugin
;(function($) {
$.fn.equalHeights = function() {
var maxHeight = 0,
$this = $(this);
$this.each( function() {
var height = $(this).innerHeight();
if ( height > maxHeight ) { maxHeight = height; }
});
return $this.css('height', maxHeight);
};
})(jQuery);
$(document).ready(function(){
var equaliseMozaic = function(){
$('.jury-president__block').equalHeights();
console.log('reset');
};
// make mozaic blocks equal heights
if( $('.jury-president__block').length > 0 ){
// equalise mozaic blocks
equaliseMozaic();
// equalise mozaic blocks on resize
var throttledequaliseMozaic = _.throttle(equaliseMozaic, 500);
$(window).resize(throttledequaliseMozaic);
}
});
.jury-blocks{}
.jury-president__block{width:100px; display: inline-block; background-color:gray;}
.jury-president__block img {width:50px;}
<div class="jury-blocks">
<div class="jury-president__block grid-20">
<a href="">
<img src="http://placekitten.com/g/300/300" alt="">
</a>
<div class="jury-president__category"> Name<br>erwer</div>
<div class="jury-president__name"> Name, Juror Company</div>
</div>
<div class="jury-president__block grid-20">
<a href="">
<!--- <img src="http://placekitten.com/g/300/300" alt=""> --->
<img src="http://placekitten.com/g/300/300" alt="">
</a>
<div class="jury-president__category"> Name</div>
<div class="jury-president__name"> Name, Juror Company</div>
</div>
<div class="jury-president__block grid-20">
<a href="">
<!--- <img src="/assets/images/female-silhouette.jpg" alt=""> --->
<img src="http://placekitten.com/g/300/300" alt="">
</a>
<div class="jury-president__category"> Name</div>
<div class="jury-president__name"> Name, Company</div>
</div>

Adding this seems to make it work:
.jury-blocks{display:flex;}
Does this plunk have the behavior you were looking for? http://plnkr.co/edit/mPCw3Firht2lbdEMRCpn?p=preview If not, I can try again.
Additionally, your fiddle did not include jQuery or underscore, both of which appear to be necessary. Once I included those in my plunk, the heights were correct, the divs were just not all positioned correctly.

Add CSS
.jury-blocks { display: table; }
.jury-president__block{ display:table-cell; vertical-align:top;}
No need of JS

jQuery Div inside Div

I'm trying to display a photo gallery with jQuery. This is my code:
<script>
$("#vsetky").click(function(){
$("#obrazky").show();
});
$("#c").click(function(){
$("#cervene").show();
});
</script>
<div id="obrazky">
<div id="cervene">
<img src="1.png">
<img src="1.png">
</div>
<div id="zlte">
<img src="2.png">
<img src="2.png">
</div>
<div id="zelene">
<img src="3.png">
<img src="3.png">
</div>
</div>
When the #vsetky element is clicked... It works, every picture is displayed.
When the #c element is clicked, there aren't any pictures.
I tried to use
$("#obrazky > #cervene").show();
I've tried other methods but nothing is working. Help me please - what am I doing wrong?

What does your css look like? If both #obrazky and #cervene have display:none, then when you click on #c you're only removing the display:none rule from #cervene, but not it's parent wrapping div#obrazky.
Edit:
You'll want to change the css to be hiding #cervene, #zlte, and #zelene, and then show and hide those individually with the javascript. If an element's parent is has display:none, then 'show()'ing it with javascript doesn't to anything because you're not removing the display:none from the parent.
<script>
$("#vsetky").click(function(){
$("#cervene, #zlte, #zelene").show();
});
$("#c").click(function(){
$("#cervene").show();
});
</script>
<style>
#obrazky {display:inline-block;}
#cervene, #zlte, #zelene {display:none;}
</style>
<div id="obrazky">
<div id="cervene">
<img src="1.png">
<img src="1.png">
</div>
<div id="zlte">
<img src="2.png">
<img src="2.png">
</div>
<div id="zelene">
<img src="3.png">
<img src="3.png">
</div>
</div>

How to make Fancybox work with carousel plugin?

I use Fancybox and Scrolling Carousel.
Try to make : click $(.subject) into Fancybox > show $(.content) > $(.content) scroll use scrollingCarousel.
I did test works fine separate.
But if I put them together (Demo1).
Why the $(.content) won't load scrollingCarousel?
(but if reload $(.content) page, then scrollingCarousel work.)
So I try to wrote in Fancybox callback (Demo2) afterLoad,beforeLoad,beforeShow... I did test too, still does't work.
(I've test other carousel plugin, same problem.)
Demo 1 jsfiddle
$(".subject").fancybox({});
$('.content').scrollingCarousel({});
Demo 2
$(".subject").fancybox({
afterLoad: function(){
$('.content').scrollingCarousel({});
}
});
HTML:
<div class="subject">
<div>
<a class="subjectlist"rel="1" href="#1">
<img class="" src="http://farm7.staticflickr.com/6106/6347065961_bb73745e70_m.jpg">
</a>
</div>
</div>
<div class="content" id="1">
<div><img class="" src="http://farm8.staticflickr.com/7171/6417719753_374653e28c_b.jpg"></div>
<div><img class="" src="http://farm7.staticflickr.com/6106/6347065961_bb73745e70_b.jpg"></div>
<div><img class="" src="http://farm7.staticflickr.com/6106/6347065961_bb73745e70_m.jpg"></div>
</div>​
CSS
.content{
display:none;
width: 200px;
height: 200px;
}
.content img{
width: 200px;
height: 200px;
}​
Any advice or help would be greatly appreciated.

.content is hidden by your CSS with display: none, so you simply have to show it using .show() before invoking the scroller, otherwise it just stays hidden.
http://jsfiddle.net/6VH7w/3/
$(".subjectlist").fancybox({
afterLoad: function() {
$('.content').show().scrollingCarousel({
scrollerAlignment: 'vertical'
});
}
});​

Hellow I made owl carousel 2 and fancybox, added fancybox css, mousewheel and js files. Then I made my items
<div class="owl-carousel owl-theme">
<div class="item">
<a class="fancybox" group="fancybox" href="imagen0.png"><img class="img-responsive img-thumbnail center-block" src="imagen0.png" title="SEJ" /></a>
</div>
<div class="item">
<a class="fancybox" group="fancybox" href="imagen1.png"><img class="img-responsive img-thumbnail center-block" src="imagen1.png" title="titulos_imagen" /></a>
</div>
</div>
I hope this help you.