I'm trying to get this code "Reveal gallery by Roko C. Buljan" - http://jsbin.com/zariku/9/edit?html,css,js,output - to work in multiple tabs here:
http://codepen.io/anon/pen/QjyMwg
JS:
var $prvw = $('#preview'),
$gall = $('.gooGallery'),
$li = $gall.find("li"),
$img = $prvw.find("img"),
$alt1 = $prvw.find("h2"),
$alt2 = $prvw.find("p"),
$full = $("<li />", {"class":"full", html:$prvw});
$li.attr("data-src", function(i, v){
$(this).css({backgroundImage: "url("+v+")"});
}).on("click", function( evt ){
var $el = $(this),
d = $el.data(),
$clone = $full.clone();
$el.toggleClass("active").siblings().removeClass("active");
$prvw.hide();
$full.after($clone);
$clone.find(">div").slideUp(function(){
$clone.remove();
});
if(!$el.hasClass("active")) return;
$img.attr("src", d.src);
$alt1.text(d.alt);
$alt2.text(d.title);
$li.filter(function(i, el){
return el.getBoundingClientRect().top < evt.clientY;
}).last().after($full);
$prvw.slideDown();
});
$(window).on("resize", function(){
$full.remove();
$li.removeClass("active");
});
2nd tab is working fine, but, when I'll try to open the first one the div isn't shown on the right position.
Can anyone please help me with a hint?
You're trying to use the same preview div for both gallerys. Try having 2 previews. Quickest way I could think would be do to something like this (be warned, this is kinda ugly):
var i = 1;
$('.gooGallery').each(function() {
var $gall = $(this);
var $prvw = $('#preview' + i); i = i+1;
var $li = $gall.find("li")
var $img = $prvw.find("img")
var $alt1 = $prvw.find("h2")
var $alt2 = $prvw.find("p")
var $full = $("<li />", {
"class" : "full",
html : $prvw
});
$li.attr("data-src", function (i, v) {
$(this).css({
backgroundImage : "url(" + v + ")"
});
}).on("click", function (evt) {
var $el = $(this),
d = $el.data(),
$clone = $full.clone(true);
$el.toggleClass("active").siblings().removeClass("active");
$prvw.hide();
$full.after($clone);
$clone.find(">div").slideUp(function () {
$clone.remove();
});
if (!$el.hasClass("active"))
return;
$img.attr("src", d.src);
$alt1.text(d.alt);
$alt2.text(d.title);
$li.filter(function (i, el) {
return el.getBoundingClientRect().top < evt.clientY;
}).last().after($full);
$prvw.slideDown();
});
$(window).on("resize", function () {
$full.remove();
$li.removeClass("active");
});
});
And then modify the preview div
<div id="preview1" class='preview'>
<img src="//placehold.it/300x180/369">
<div><h2></h2><p></p></div>
</div>
<div id="preview2" class='preview'>
<img src="//placehold.it/300x180/369">
<div><h2></h2><p></p></div>
</div>
Thought it looked weird so threw in the necessary css changes:
.preview{
display:none;
}
.preview > *{
float:left;
margin:3%;
}
.preview img{
max-width:100%;
}
Related
hi I tried to show the div (blue one) on mouseenter but only then, when ul has class hidden.
I have done it but how i dont know how can i bind again function which will show the blue div on mouseenter ..
To test it hover on the white li, then click the violet button and try to hover white li again - in the last step should show blue li but ii wont :(
this is my fiddle
fiddle
$(document).ready(function(e){
$('li').each( function() {
var elem_number = $(this).index();
$(this).html(elem_number + 1);
});
$('.left-panel-toggle').on('click', function () {
if($('ul').hasClass('hidden')) {
$('ul').animate({width:'150px'}, 200).addClass('visible').removeClass('hidden');
$('li').animate({height:'100px',width:'150px'}, 200);
$('li').unbind("mouseenter");
} else {
$('ul').animate({width:'35px'}, 200).addClass('hidden').removeClass('visible');
$('li').animate({height:'30px', width:'30px'}, 200);
}
});
$( "li" ).bind('mouseenter',function(e) {
if($('ul').attr('class') == 'hidden') {
$('.tooltip').show().animate({'left':'36px','opacity':'1'},100);
var tooltip_height = $('.tooltip').height();
var tooltip_width = $('.tooltip').width();
var viewHeightY = $(window).height();
var li_position = $(this).position();
var li_height = $(this).height();
var li_width = $(this).width();
var tooltip_position = $('.tooltip').position();
var tt = tooltip_position.top + tooltip_height
if(li_position.top < tooltip_height/2) {
$('.tooltip').css({'top':li_position.top - li_position.top, 'left':li_position.left + li_width + 15});
}
if(li_position.top > tooltip_height/2) {
$('.tooltip').css({'top':li_position.top - tooltip_height/2, 'left':li_position.left + li_width + 15});
}
if((viewHeightY - li_position.top) < tooltip_height/2) {
$('.tooltip').css({'top':li_position.top -((li_position.top + tooltip_height)-viewHeightY), 'left':li_position.left + li_width + 15});
}
}
// $('img.x').attr('src', $(this.img).val('src'));
e.preventDefault();
});
$( "ul" ).bind('mouseleave', function() {
$('.tooltip').animate({'left':'56px','opacity':'0'},60);
});
});
I have a question about my javascript code.
I got this script from internet, but the problem is that it displays text, I want to make a div of it because I want it like a button instead.
This is the code:
<script type="text/javascript">
$(document).ready(function () {
var maxheight=218;
var showText = "Lees meer..";
var hideText = "Inklappen";
$('.leesmeer').each(function () {
var text = $(this);
if (text.height() > maxheight){
text.css({ 'overflow': 'hidden','height': maxheight + 'px' });
var link = $('' + showText + '');
var linkDiv = $('<div></div>');
linkDiv.append(link);
$(this).after(linkDiv);
link.click(function (event) {
event.preventDefault();
if (text.height() > maxheight) {
$(this).hktml(showText);
text.css('height', maxheight + 'px');
} else {
$(this).html(hideText);
text.css('height', 'auto');
}
});
}
});
Thanks for the advice!
For fun i tried changing the code into a jquery plugin, which you could find here, and which simplifies the ready function quite a lot :)
http://jsfiddle.net/Icepickle/SA744/
$(document).ready(function () {
$('.leesmeer').readMore({});
});
Just use input tag with type="button" and value="something " it works
var link = $('<input type="button" value=' + showText + '/>');
Simply add the div tag to the text :
var showText = "<div class='more-less'>Read More..</div>";
var hideText = "<div class='more-less'>Read Less</div>";
JSFiddle
I have many divs distributed in rows and columns, (generated using jQuery). Each one of these divs is re-sizable, using JQuery UI Resizable. In order to define the requirements, all divs must use absolute positioning. So, when I re-size any of these divs, the script should update the top attribute of all divs below this, (located in the same column and one row after the current resizing div).
This is the code I have now:
updatePositions: function() {
var update = 0;
$(".element").resizable({
handles: 's',
start: function(event, ui) {
event.stopPropagation();
var el = $(this);
var el_row = parseInt(el.attr("row"));
var el_rel = parseInt(el.attr("rel"));
var el_col = parseInt(el.attr("col"));
update = $(".element").filter(function() {
return(
$(this).attr("row") > el_row &&
$(this).attr("col") == el_col &&
$(this).attr("rel") != el_rel
);
});
},
resize: function(event, ui) {
update.each(function(event){
var top = $(this).position().top + $(this).height() + 20;
$(this).css("top", top )
});
}
})
}
And here is an example: JSFiddle
As you can see, all the divs are found just right and I can update the top position. But for some reason it's getting crazy when resizing! It seems like I'm doing the update as many times as found tiles on each selected div.
finally I solved this problem. JSFiddle
this is the js code:
function CacheType(){
corrtop = 0;
rel = 0;
}
$.extend({
updatePositions: function() {
var update = 0;
var arr = new Array();
$(".element").resizable({
handles: 's',
start: function(event, ui) {
event.stopPropagation();
var el = $(this);
var el_row = parseInt(el.attr("row"));
var el_rel = parseInt(el.attr("rel"));
var el_col = parseInt(el.attr("col"));
var ex = el.position().top;
var ey = el.height();
update = $(".element").filter(function() {
if(
$(this).attr("row") > el_row &&
$(this).attr("col") == el_col &&
$(this).attr("rel") != el_rel
){
var tmp = new CacheType();
tmp.corrtop = $(this).position().top - ex - ey;
tmp.rel = $(this).attr('rel');
arr.push(tmp);
return true;
}else{
return false;
}
});
},
resize: function(event, ui) {
var x = $(this).height() + $(this).position().top;
update.each(function(event){
for(var i=0;i<arr.length; i++){
var tmp = arr[i];
var rel = $(this).attr('rel');
if(rel == tmp.rel)
$(this).css("top", x + tmp.corrtop);
}
});
}
})
}
});
$(document).ready(function(){
$.updatePositions();
});
How to make the show() individually, once I clicked the, show, all .whateverever class(es) are opened.
Here is the code:
$(document).ready(function() {
function excerpt(text, len) {
return text.substring(0, len) + "…" + '<span>Show</span>';
}
var $div = $('.container');
$div.each(function() {
var $p = $(this).find("p:first");
var theExcerpt = excerpt($p.text(), 230);
$p.data('html', $p.html()).html(theExcerpt);
});
$('span').click(function() {
var isHidden = $(this).text() == 'Show';
var $p = $(this).parent();
var theExcerpt = excerpt($p.text(), 230);
$p.html(isHidden ? $p.data('html') : theExcerpt);
$('.whateverever').show();
$(this).remove();
});
});
Please check online SAMPLE: http://jsfiddle.net/M6wzh/6/
Thanks a lot
Try
$(document).ready(function() {
function excerpt(text, len) {
return text.substring(0, len) + "…" + '<span>Show</span>';
}
var $div = $('.container');
$div.each(function() {
var $p = $(this).find("p:first");
var theExcerpt = excerpt($p.text(), 230);
$p.data('html', $p.html()).html(theExcerpt);
});
$('span').click(function() {
var isHidden = $(this).text() == 'Show';
var $p = $(this).parent();
var theExcerpt = excerpt($p.text(), 230);
$p.html(isHidden ? $p.data('html') : theExcerpt);
$p.next().show();//the div you're looking for is the next sibling of the parent p
$(this).remove();
});
});
http://jsfiddle.net/mowglisanu/M6wzh/7/
$('.whateverever', this).show();
instead of
$('.whateverever').show();
should get you on your way.
You can do this:
$('span').click(function() {
var isHidden = $(this).text() == 'Show';
var $p = $(this).parent();
var theExcerpt = excerpt($p.text(), 230);
$p.html(isHidden ? $p.data('html') : theExcerpt);
$(this).next(".whateverever").show();
$(this).remove();
});
Fiddle
have u use .closet() of jquery before this.
just little edit in your code
$('.whateverever').show();
replace this line by
$.closest('.whateverever').show();
and check.
I have the following script:
(function($) {
$.fn.easyPaginate = function(options){
var defaults = {
step: 4,
delay: 100,
numeric: true,
nextprev: true,
controls: 'pagination',
current: 'current'
};
var options = $.extend(defaults, options);
var step = options.step;
var lower, upper;
var children = $(this).children();
var count = children.length;
var obj, next, prev;
var page = 1;
var timeout;
var clicked = false;
function show(){
clearTimeout(timeout);
lower = ((page-1) * step);
upper = lower+step;
$(children).each(function(i){
var child = $(this);
child.hide();
if(i>=lower && i<upper){ setTimeout(function(){ child.fadeIn('fast') }, ( i-( Math.floor(i/step) * step) )*options.delay ); }
if(options.nextprev){
if(upper >= count) { next.addClass('stop'); } else { next.removeClass('stop'); };
if(lower >= 1) { prev.removeClass('stop'); } else { prev.addClass('stop'); };
};
});
$('li','#'+ options.controls).removeClass(options.current);
$('li[data-index="'+page+'"]','#'+ options.controls).addClass(options.current);
if(options.auto){
if(options.clickstop && clicked){}else{ timeout = setTimeout(auto,options.pause); };
};
};
function auto(){
if(upper <= count){ page++; show(); }
else { page--; show(); }
};
this.each(function(){
obj = this;
if(count>step){
var pages = Math.floor(count/step);
if((count/step) > pages) pages++;
var ol = $('<ol id="'+ options.controls +'" class="pagin"></ol>').insertAfter(obj);
if(options.nextprev){
prev = $('<li class="prev">prev</li>')
.appendTo(ol)
.bind('click', function() {
//check to see if there are any more pages in the negative direction
if (page > 1) {
clicked = true;
page--;
show();
}
});
}
if(options.numeric){
for(var i=1;i<=pages;i++){
$('<li data-index="'+ i +'">'+ i +'</li>')
.appendTo(ol)
.click(function(){
clicked = true;
page = $(this).attr('data-index');
show();
});
};
};
if(options.nextprev){
next = $('<li class="next">next</li>')
.appendTo(ol)
.bind('click', function() {
//check to see if there are any pages in the positive direction
if (page < (count / 4)) {
clicked = true;
page++;
show();
}
});
}
show();
};
});
};
})(jQuery);
jQuery(function($){
$('ul.news').easyPaginate({step:4});
});
which is a carousel-like plugin that produces this html structure for the navigation:
<ol id="pagination" class="pagin"><li class="prev">prev</li><li data-index="1" class="">1</li><li data-index="2" class="">2</li><li data-index="3" class="current">3</li><li class="next stop">next</li></ol>
And all I want is to enclose this list in a div. Seems simple, but appendTo doesn't want to cooperate with me, or I'm doing something wrong (I'd appreciate if you would help me understand what that is..)
So I'm modifying as such:
var ol = $('<ol id="'+ options.controls +'" class="pagin"></ol>');
var tiv = $('<div id="lala"></div>');
ol.appendTo('#lala');
tiv.insertAfter(obj);
I know how to chain, but I'm in "debugging" mode trying to understand why I don't get the result I imagine I would get:
<div id="lala>
<ol id="pagination><li>...... </li></ol>
</div>
I tried putting some console.log's to see the status of my variables but couldn't find something useful.. I guess there's something with DOM insertion I don't get.
You're appending the <ol> element to #lala before adding the latter to the document. There's nothing wrong with this, but since you're using an id selector, and the target element is not part of the document yet, the selector will not match anything.
To fix this, you can write:
var ol = $('<ol id="'+ options.controls +'" class="pagin"></ol>');
var tiv = $('<div id="lala"></div>');
ol.appendTo(tiv);
tiv.insertAfter(obj);
Or:
var ol = $('<ol id="'+ options.controls +'" class="pagin"></ol>');
var tiv = $('<div id="lala"></div>');
tiv.insertAfter(obj);
ol.appendTo('#lala');