I have created tabs. There are 3 tab items and tabs content is sliders.When i use these slideshows without tabs it works fine. But when used tabs, the slider of tab2 or tab3 sometimes does not load. It only occurs sometimes. What I have learnt that it loads perfectly on page load when using no tabs, But with tabs I have to hide the other 2 tabs on page load. So when click on these tabs, the slideshow does not appear /load sometimes.It also works fine sometimes. Tabs working fine the text content also.
I have been working on shopify, so using slideshow of theme.
Here is the code for html code for tabs:
<ul class="tabs">
<li>
<a data-toggle="tab" href="#menu1">Tab 1</a>
</li>
<li>
<a data-toggle="tab" href="#menu2">Tab 2</a>
</li>
<li>
<a data-toggle="tab" href="#menu3">Tab 3</a>
</li>
</ul>
<!-- Code for tabs Contnet -->
<div id="menu1">
<section class="homepage-slideshow js-homepage-slideshow">
<div class="gallery-cell slide1">
<div class="oc_img_container">
<img src="image1.jpg"/>
</div>
</div>
<div class="gallery-cell slide1">
<div class="oc_img_container">
<img src="image2.jpg"/>
</div>
</div>
<div class="gallery-cell slide1">
<div class="oc_img_container">
<img src="image3.jpg"/>
</div>
</div>
</section>
</div>
<div id="menu2">
<section class="homepage-slideshow js-homepage-slideshow">
<div class="gallery-cell slide1">
<div class="oc_img_container">
<img src="image21.jpg"/>
</div>
</div>
<div class="gallery-cell slide1">
<div class="oc_img_container">
<img src="image22.jpg"/>
</div>
</div>
<div class="gallery-cell slide1">
<div class="oc_img_container">
<img src="image23.jpg"/>
</div>
</div>
</section>
</div>
<div id="menu3">
<section class="homepage-slideshow js-homepage-slideshow">
<div class="gallery-cell slide1">
<div class="oc_img_container">
<img src="image31.jpg"/>
</div>
</div>
<div class="gallery-cell slide1">
<div class="oc_img_container">
<img src="image32.jpg"/>
</div>
</div>
<div class="gallery-cell slide1">
<div class="oc_img_container">
<img src="image33.jpg"/>
</div>
</div>
</section>
</div>
Javascript for tabs
<script type="text/javascript">
$(document).ready(function() {
$('ul.tabs').each(function(){
var active, content, links = $(this).find('a');
active = links.first().addClass('active');
content = $(active.attr('href'));
links.not(':first').each(function () {
$($(this).attr('href')).hide();
});
$(this).find('a').click(function(e){
active.removeClass('active');
content.hide();
active = $(this);
content = $($(this).attr('href'));
active.addClass('active');
content.show();
return false;
});
});
});
</script>
I am working in shopify and the using the slider of theme, here is the code for slideshow from theme.
var slideshow = {
init: function(){
$('.js-homepage-slideshow').each(function (index, value){
var $homepageSlider = $(this);
var settings = {
slideshowSpeed: $homepageSlider.data('slideshow-speed')*1000,
slideshowTextAnimation: $homepageSlider.data('slideshow-text-animation'),
adaptiveHeight: $homepageSlider.data('adaptive-height')
}
//initiate the slideshow
if (!$homepageSlider.hasClass('flickity-enabled')){
var arrowShow = $homepageSlider.find('.gallery-cell').length === 1 ? false : true;
$homepageSlider.flickity({
adaptiveHeight: settings.adaptiveHeight,
wrapAround: true,
cellAlign: 'left',
imagesLoaded: true,
prevNextButtons: arrowShow,
draggable: arrowShow,
pageDots: usePageDots,
autoPlay: settings.slideshowSpeed,
arrowShape: arrowSize
});
if (settings.slideshowTextAnimation != ''){
var flkty = $homepageSlider.data('flickity');
setTimeout(function() {
$homepageSlider.find('.gallery-cell:nth-child(1) .caption-content').addClass('animated ' + settings.slideshowTextAnimation);
}, 400);
$homepageSlider.on( 'select.flickity', function() {
if($homepageSlider.is(':visible')) {
var currentSlide = flkty.selectedIndex + 1;
setTimeout(function() {
$homepageSlider.find('.caption-content').removeClass('animated ' + settings.slideshowTextAnimation);
$homepageSlider.find('.gallery-cell:nth-child(' + currentSlide + ') .caption-content').addClass('animated ' + settings.slideshowTextAnimation);
}, 400);
}
});
}
}
if ($homepageSlider.find('.gallery-cell').length > 1) {
$homepageSlider.addClass('multi-image');
} else {
$homepageSlider.addClass('single-image');
}
$homepageSlider.find('.gallery-cell').each(function(){
var buttonWidth = 0;
$(this).find('.action_button').each(function(){
$button = $(this);
if($(this).width() > buttonWidth){
buttonWidth = $(this).width();
}
});
$(this).find('.action_button').width(buttonWidth);
});
});
},
unload: function($target){
var $slider = $target.find('.js-homepage-slideshow');
$slider.flickity('destroy');
}
}
I have a series of blocks that repeat like this:
<div class="producto_banner">
<div class="positioner">
<div class="left">
<div class="titulo">Title</div>
<div class="subtitulo">Subtitle</div>
<div class="introduccion">Intro</div>
<a class="boton" href="#">anchor</a>
</div>
<div class="right">
<img src="image source">
</div>
</div>
</div>
<div class="producto_banner">
<div class="positioner">
<div class="left">
<div class="titulo">Title</div>
<div class="subtitulo">Subtitle</div>
<div class="introduccion">Intro</div>
<a class="boton" href="#">anchor</a>
</div>
<div class="right">
<img src="image source">
</div>
</div>
</div>
...
And I would like to animate the .right div inside each of them when they come into view.
So far I have this:
function isScrolledIntoView(elem) {
var centerY = Math.max(0,((jQuery(window).height()-
jQuery(elem).outerHeight()) / 2)
+ jQuery(window).scrollTop());
var elementTop = jQuery(elem).offset().top;
var elementBottom = elementTop + jQuery(elem).height();
return elementTop <= centerY && elementBottom >= centerY;
}
$(window).on("scroll resize", function() {
console.log('scrolling');
$(".producto_banner").each(function(index, element) {
if (isScrolledIntoView(element)) {
$(this).find('.right').animate({'right':'50px'},1000);
}
});
});
But for some reason it’s only animating the last 2 blocks (out of 5)
I am having an issue with my nav bar not working correctly with the ScrollTop Javascript. It works in Chrome and Safari but not Firefox.
This is all the code I currently have on the site. I want the nav bar to follow the scroll once the nav bar is at the top of the page. Please view in Firefox as that is where I am having the issue!
Html
<body>
<div class="container">
<nav class="bottom" id="nav">
<div class="buttonWrapper">
<a href="#about">
<div class="navButton">About</div>
</a>
<a href="#designs">
<div class="navButton">Designs</div>
</a>
<a href="#contact">
<div class="navButton">Contact</div>
</a>
</div>
</nav>
<div class="largeLogo"></div>
</div>
<div class="container about" id="about">
<div class="sideBar about">
<div class="sidebarText"></div>
<p></p>
</div>
</div>
<div class="container designs" id="designs">
<div class="view view-ninth">
<img src="images/11.jpg" />
<div class="mask mask-1"></div>
<div class="mask mask-2"></div>
<div class="content">
<h2>Hover Style #9</h2>
<p>Some Text</p>
Read More
</div>
</div>
<div class="sideBar designs">
<div class="sidebarText"></div>
</div>
</div>
<div class="container contact" id="contact">
<div class="sideBar contact">
<div class="sidebarText"></div>
</div>
</div>
</body>
JavaScript
$(function() {
$('a[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//, '') === this.pathname.replace(/^\//, '') && location.hostname === this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
window.addEventListener("scroll", navTop, false);
function navTop() {
var nav = document.getElementById("nav");
var about = document.getElementById("about").offsetTop - 1;
if (document.body.scrollTop > about) {
nav.className = "minimize";
} else {
nav.className = "bottom";
}
}
Fiddle
The issue is with document.body.scrollTop. Try using below code :
function navTop() {
var nav = document.getElementById("nav");
var about = document.getElementById("about").offsetTop - 1;
var scrollTop = $(document).scrollTop();
if (scrollTop > about) {
nav.className = "minimize";
} else {
nav.className = "bottom";
}
}
$(document).scrollTop(); / $(window).scrollTop(); works for both Firefox and Chrome
I have a big jquery code..
Thing is, i want to create a online banner editor.
I have added two texts which are inside two divs. This divs are draggable. The divs in turn resides under two more divs which are resizable
Now i want to make a feature that when i cleck on the div containing the text, the div must get editable so that i can edit inline
But dont know why, the dblClick isnt working
Here's my code
<script type="text/javascript">
$(function(){
$.contextMenu({
selector: '.context-menu-icon, .context-menu-text',
build: function($trigger, e) {
// this callback is executed every time the menu is to be shown
// its results are destroyed every time the menu is hidden
// e is the original contextmenu event, containing e.pageX and e.pageY (amongst other data)
return {
callback: function(key, options)
{
if(key=='delete')
$(this).remove();
},
items: {
"edit": {name: "Edit", icon: "edit"},
"cut": {name: "Cut", icon: "cut"},
"copy": {name: "Copy", icon: "copy"},
"paste": {name: "Paste", icon: "paste"},
"delete": {name: "Delete", icon: "delete"},
"sep1": "---------",
"quit": {name: "Quit", icon: "quit"}
}
};
}
});
});
$(document).ready(function()
{
$.fn.jPicker.defaults.images.clientPath='color-picker-img/';
$('.color_text').jPicker();
$("#blink_icon").dblclick(function()
{
alert( "Handler for .dblclick() called." );
});
$(".edit_text").dblclick(function()
{
alert( "Handler for .dblclick() called." );
});
$("#accept_first_text").click(function()
{
var img_w = $('#target').width();
var img_h = $('#target').height();
var first_text_width = parseFloat(parseFloat(img_w)/2);
var first_left = parseFloat(parseFloat(img_w)-parseFloat(first_text_width))/2;
var first_top = $('#first_text_top').val();
var first_left = $('#first_text_left').val();
var first_color = $('#first_text_color').val();
var first_size = $('#first_text_size').val();
var first_text_desc = $('#first_text_area').val();
$('#drag_first_text').css({"left":first_left+"px",
"top":first_top+"px",
"position":"absolute",
"width":first_text_width+"px",
"z-index":"5"});
$('#first_text').css({'font-weight':'bold',
'color':'#'+first_color,
'font-size':first_size+'px'});
$('#first_text').html(first_text_desc);
$('#first_text').resizable();
});
$("#accept_second_text").click(function()
{
var img_w = $('#target').width();
var img_h = $('#target').height();
var second_text_width = parseFloat(parseFloat(img_w)/2);
var second_left = parseFloat(parseFloat(img_w)-parseFloat(second_text_width))/2;
var second_top = $('#second_text_top').val();
var second_left = $('#second_text_left').val();
var second_color = $('#second_text_color').val();
var second_size = $('#second_text_size').val();
var second_text_desc = $('#second_text_area').val();
$('#drag_second_text').css({"left":second_left+"px",
"top":second_top+"px",
"position":"absolute",
"width":second_text_width+"px",
"z-index":"5"});
$('#second_text').css({'font-weight':'bold',
'color':'#'+second_color,
'font-size':second_size+'px'});
$('#second_text').html(second_text_desc);
$('#second_text').resizable();
});
$("#get_image").click(function()
{
html2canvas([document.getElementById('main_canvas')],
{
onrendered: function (canvas) {
/*document.getElementById('canvas').appendChild(canvas);*/
var Imagedata = canvas.toDataURL('image/png');
var imagename = $('#image_name').val();
// AJAX call to send `data` to a PHP file that creates an image from the dataURI string and saves it to a directory on the server
$.post("save.php",{'image_link':Imagedata,'image_name':imagename},
function(img_data)
{
var final_href = $('<a/>',{'id':'final_href'});
$(final_href).prop({'href':'download.php?download='+img_data,'target':'_blank'});
var final_img = $('<img/>', {'id':'final','src':img_data});
$(final_img).css({"width":"100px","height":"auto"});
$(final_href).append(final_img);
$('#final_image').html(final_href);
ShowModalPopup('div_show_banner');
}
);
}
});
});
$("#get_animated_image").click(function()
{
html2canvas([document.getElementById('main_canvas')],
{
onrendered: function (canvas) {
/*document.getElementById('canvas').appendChild(canvas);*/
var shots = [];
var grabLimit = 400; // Number of screenshots to take
var grabRate = 50; // Miliseconds. 500 = half a second
var count = 0;
function showResults()
{
//console.log(shots);
for (var i=0; i<shots.length; i++) {
document.write('<img src="' + shots[i] + '"/>\n');
}
}
var grabber = setInterval(
function()
{
count++;
if (count>grabLimit)
{
clearInterval(grabber);
showResults();
}
var img = canvas.toDataURL("image/png");
shots.push(img);
}, grabRate);
var Imagedata = canvas.toDataURL('image/png');
var imagename = $('#animated_image_name').val();
}
});
});
$("#blink_icon").click(function()
{
var interval = 100;
var time = 90000000;
var timer = window.setInterval(function()
{
$("#drag_wrapper").css("opacity", "0.1");
window.setTimeout(function()
{
$("#drag_wrapper").css("opacity", "1");
}, 100);
}, interval);
window.setTimeout(function(){clearInterval(timer);}, time);
});
$("#upload_icon_Form").on('submit',(function(e) {
e.preventDefault();
$.ajax({
url: "upload_icon.php",
type: "POST",
data: new FormData(this),
contentType: false,
cache: false,
processData:false,
success: function(data)
{
$("#targeticonLayer").html(data);
},
error: function()
{
}
});
}));
$("#upload_template_Form").on('submit',(function(e) {
e.preventDefault();
$.ajax({
url: "upload_template.php",
type: "POST",
data: new FormData(this),
contentType: false,
cache: false,
processData:false,
success: function(data)
{
$("#targetLayer").html(data);
},
error: function()
{
}
});
}));
});
$(document).ready(function()
{
});
function dump_template(src,close_div)
{
var item_template = $('<img/>', {'id':'target','src':src});
var first_text = $('<div/>', {'id':'first_text','class':'edit_text'});
$(first_text).css({"left":"0px",
"top":"0px",
"color":"#fff",
"position":"relative",
"width":"auto",
"text-align":"center"});
$(first_text).html('Demo First Text');
var second_text = $('<div/>', {'id':'second_text','class':'edit_text'});
$(second_text).css({"left":"0px",
"top":"0px",
"color":"#fff",
"position":"relative",
"width":"auto",
"text-align":"center"});
$(second_text).html('Demo Second Text');
$('#main_canvas').html(item_template);
var width = $("#target").width();
var height = $("#target").height();;
$('#main_canvas').css({'height':height+'px','width':width+'px'});
var drag_first_text = $('<div/>', {'id':'drag_first_text','class':'context-menu-text'});
var drag_second_text = $('<div/>', {'id':'drag_second_text','class':'context-menu-text'});
$(drag_first_text).css({"left":"20px",
"top":"100px",
"position":"absolute",
"width":"auto",
"z-index":"5",
"text-align":"center",
});
$(drag_second_text).css({"left":"20px",
"top":"150px",
"position":"absolute",
"width":"auto",
"z-index":"5",
"text-align":"center"});
$(drag_first_text).append(first_text);
$(drag_second_text).append(second_text);
$('#main_canvas').append(drag_first_text).append(drag_second_text);
$(drag_first_text).draggable({grid:[1,1]});
$(drag_second_text).draggable({grid:[1,1]});
HideModalPopup(close_div);
}
function dump_icon(src,close_div)
{
var dragg_wrapper = $('<div/>', {'id':'drag_wrapper','class':'context-menu-icon'});
$(dragg_wrapper).css({"left":"20px",
"top":"20px",
"position":"absolute",
"width":"50px",
"z-index":"5"});
var item_img = $('<img/>', {'id':'icon_img','src':src});
$(item_img).css({"left":"0px",
"top":"0px"});
$(dragg_wrapper).append(item_img);
$('#main_canvas').append(dragg_wrapper);
$(dragg_wrapper).draggable({grid:[1,1]});
$("#icon_img").resizable();
HideModalPopup(close_div);
}
function choose_template()
{
$.post("showtemplate.php",{'show':'show'},
function(data)
{
$('#div_template_list').html(data);
ShowModalPopup('div_show_template');
});
}
function choose_icon()
{
$.post("showicon.php",{'show':'show'},
function(data)
{
$('#div_icon_list').html(data);
ShowModalPopup('div_show_icon');
});
}
</script>
EDIT
As someone requested, here's the html
<div class="container">
<div class="row">
<div class="span11">
<div class="demo-box">
<div class="page-header">
<h1>Dynamica Banner Creator</h1>
</div>
<h4>Upload Banner Template</h4>
<div style="margin-bottom: 10px; height: auto; overflow:hidden;">
<div class="button_div">
<a href="javascript:void(0);"
onclick="ShowModalPopup('div_upload_template');">
Upload Template
</a>
</div>
<div class="button_div">
<a href="javascript:void(0);"
onclick="choose_template()">Choose Template</a>
</div>
<div class="button_div">
<a href="javascript:void(0);"
onclick="ShowModalPopup('div_upload_icon');">Upload Icon</a>
</div>
<div class="button_div">
<a href="javascript:void(0);"
onclick="choose_icon()">Choose Icon</a>
</div>
</div>
<div style="position:relative;" id="main_canvas">
</div>
</div>
<div id="script_frame">
<h1>Enter your text details details</h1>
<div style="position:relative; height:auto; overflow:hidden;">
<div id="first_text_setter">
<div class="object_container">
<div class="span_container">
<span class="input_span">First Text Top-Pos.</span>
</div>
<div class="text_container">
<input id="first_text_top" name="first_text_top"
class="input_text"/>
</div>
</div>
<br/>
<div class="object_container">
<div class="span_container">
<span class="input_span">First Text Left-Pos.</span>
</div>
<div class="text_container">
<input id="first_text_left" name="first_text_left"
class="input_text"/>
</div>
</div>
<br/>
<div class="object_container">
<div class="span_container">
<span class="input_span">First Text Color.</span>
</div>
<div class="text_container">
<input id="first_text_color" name="first_text_color"
class="color_text"/>
<span class="jPicker">
</span>
</div>
</div>
<br/>
<div class="object_container">
<div class="span_container">
<span class="input_span">First Text Size.</span>
</div>
<div class="text_container">
<select id="first_text_size" name="first_text_size"
class="input_text">
<?php
for($i=4;$i<=32;$i=$i+2)
{?>
<option value="<?php echo $i;?>"><?php echo $i;?></option>
<?php
}?>
</select>
</div>
</div>
<br/>
<div class="object_container">
<span class="input_span">First Text Des</span>
<br/>
<textarea id="first_text_area" name="first_text_area" class="input_text_area"></textarea>
</div>
<button id="accept_first_text">Get</button>
<div class="clearfix"></div>
</div>
<div id="second_text_setter">
<div class="object_container">
<div class="span_container">
<span class="input_span">Second Txt Top-Pos</span>
</div>
<div class="text_container">
<input id="second_text_top" name="second_text_top"
class="input_text"/>
</div>
</div>
<div class="object_container">
<div class="span_container">
<span class="input_span">Second Txt Left-Pos</span>
</div>
<div class="text_container">
<input id="second_text_left" name="second_text_left"
class="input_text"/>
</div>
</div>
<div class="object_container">
<div class="span_container">
<span class="input_span">Second Text Color</span>
</div>
<div class="text_container">
<input id="second_text_color" name="second_text_color"
class="color_text"/>
<span class="jPicker">
</span>
</div>
</div>
<div class="object_container">
<div class="span_container">
<span class="input_span">Second Text Size</span>
</div>
<div class="text_container">
<select id="second_text_size" name="second_text_size"
class="input_text">
<?php
for($i=4;$i<=32;$i=$i+2)
{?>
<option value="<?php echo $i;?>"><?php echo $i;?></option>
<?php
}?>
</select>
</div>
</div>
<div class="object_container">
<span class="input_span">Second Txt Des</span>
<br/>
<textarea id="second_text_area" name="second_text_area" class="input_text_area"></textarea>
</div>
<button id="accept_second_text">Get</button>
<div class="clearfix"></div>
</div>
</div>
<br/>
<div style="clear:both; float:left; margin-top:30px; position:relative;">
<div class="object_container">
<span class="input_span">Image Name</span>
<input id="image_name" name="image_name"
class="input_text"/>
</div>
<br/>
<button id="get_image">Save Image</button>
</div>
<div style="clear:both; float:left; margin-top:30px; position:relative;">
<div class="object_container">
<span class="input_span">Animated Gif Name</span>
<input id="animated_image_name" name="image_name"
class="input_text"/>
</div>
<br/>
<button id="get_animated_image">Save Gif Image</button>
<button id="blink_icon">Blink</button>
</div>
</div>
</div>
</div>
</div>
</div>
There is far too much code to wade through, but the most likely cause is dynamic creation of the divs.
Use delegated event handlers instead, attached to a non-changing ancestor (document is the default if nothing closer is available). Try this:
$(document).on('dblclick', "#blink_icon", function()
{
alert( "Handler for .dblclick() called." );
});
$(document).on('dblclick', ".edit_text", function()
{
alert( "Handler for .dblclick() called." );
});
They work by listening for the specified event (dblclick in this case) bubbling up to the ancestor, then it applies the jQuery selector, then it calls the function on any matching elements that caused the event. This means they can work on elements that do not exist yet.
i have some containers that contain some divs like:
<div id="container1">
<div id="task1" onMouseOver="DragDrop("+1+");"> </div>
<div id="task2" onMouseOver="DragDrop("+2+");"> </div>
<div id="task3" onMouseOver="DragDrop("+3+");"> </div>
<div id="task4" onMouseOver="DragDrop("+4+");"> </div>
</div>
<div id="container2">
<div id="task5" onMouseOver="DragDrop("+5+");"> </div>
<div id="task6" onMouseOver="DragDrop("+6+");"> </div>
</div>
<div id="container3">
<div id="task7" onMouseOver="DragDrop("+7+");"> </div>
<div id="task8" onMouseOver="DragDrop("+8+");"> </div>
<div id="task9" onMouseOver="DragDrop("+9+");"> </div>
<div id="task10" onMouseOver="DragDrop("+10+");"> </div>
</div>
i'm trying to drag tasks and drop them in one of the container divs, then reposition the dropped task so that it doesn't affect the other divs nor fall outside one of them
and to do that i'm using the event onMouseOver to call the following function:
function DragDrop(id) {
$("#task" + id).draggable({ revert: 'invalid' });
for (var i = 0; i < nameList.length; i++) {
$("#" + nameList[i]).droppable({
drop: function (ev, ui) {
var pos = $("#task" + id).position();
if (pos.left <= 0) {
$("#task" + id).css("left", "5px");
}
else {
var day = parseInt(parseInt(pos.left) / 42);
var leftPos = (day * 42) + 5;
$("#task" + id).css("left", "" + leftPos + "px");
}
}
});
}
}
where:
nameList = [container1, container2, container3];
the drag is working fine, but the drop is not really, it's just a mess!
any help please??
when i hardcode the id and the container, then it works beautifully, but as soon as i use id in drop then it begins to work funny!
any suggestions???
thanks a million in advance
Lina
Consider coding it like this:
<div id="container1" class="container">
<div id="task1" class="task">1 </div>
<div id="task2" class="task">2 </div>
<div id="task3" class="task">3 </div>
<div id="task4" class="task">4 </div>
</div>
<div id="container2" class="container">
<div id="task5" class="task">5 </div>
<div id="task6" class="task">6 </div>
</div>
<div id="container3" class="container">
<div id="task7" class="task">7 </div>
<div id="task8" class="task">8 </div>
<div id="task9" class="task">9 </div>
<div id="task10" class="task">10 </div>
</div>
$(function(){
$(".task").draggable({ revert: 'invalid' });
$(".container").droppable({
drop: function (ev, ui) {
//process dropped item
}
});
})