item shows individually

item shows individually - javascript

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.

Related

jQuery - Multiple expanding galleries in tabs

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%;
}

Change link attribute when scrolling to anchor

Can someone please put me out of my misery and 'fix' or 'solve' my issue: as you can see via my JSfiddle link
http://jsfiddle.net/SJkmh/312/
jQuery(document).ready(function ($) {
var h = $("#main-menu").height() * 1.25;
$(".scroll").click(function (event) {
event.preventDefault();
$('html,body').animate({
scrollTop: $(this.hash).offset().top - h
}, 300);
});
I can't seem to get it to work - all I want to do is change the colour of the link text to identify what section of the page the user is on. please help me?
Thanks in advance

UPDATE : Select menu item on scroll
[UPDATED] jsFiddle : http://jsfiddle.net/thecbuilder/Qtjx6/2/
added js
$(window).scroll(function () {
// Get container scroll position
var topHeight = $(this).scrollTop() + h + 10;
var onTopId;
$(".testx").each(function () {
var curTop = $(this).offset().top;
var curBottom = curTop + $(this).height();
if (curTop < fromTop && curBottom > topHeight) {
onTopId = $(this).attr("id");
}
});
$selLink.removeClass("selected");
$selLink = $("a[href=#"+onTopId+"]").addClass("selected");
});
This should do the task : http://jsfiddle.net/thecbuilder/Qtjx6/
js
var $selLink = $("ul li a");
$(function(){
$("ul li a").click(function(){
$selLink.removeClass("selected");
$selLink = $(this);
$selLink.addClass("selected");
});
});
css
.selected{
color : #4B85C3;
}

You are checking the offset of the links not the content sections. Working fiddle:
http://jsfiddle.net/SJkmh/315/
$(document).scroll(function () {
var h = $("#main-menu").height() * 1.5;
var link1 = $("#home").offset().top;
var link2 = $("#about").offset().top;
var link3 = $("#work").offset().top;
var selectedColor = "#4B85C3";
var defaultColor = "#2e375b";
var top = $(this).scrollTop() - h;
$("#main-menu li a").css('color', defaultColor);
if (top <= link1) {
$("#link1").css('color', selectedColor);
} else if (top <= link2) {
$("#link2").css('color', selectedColor);
} else {
$("#link3").css('color', selectedColor);
}
});

The way to do this would be to reset the color of all the links, and then set the color of the $(this) to the new color
jQuery(document).ready(function ($) {
var h = $("#main-menu").height() * 1.25;
$(".scroll").click(function (event) {
$('a.scroll').css({"color": "#2e375b"});
$(this).css({"color": "#4B85C3"});
event.preventDefault();
$('html,body').animate({
scrollTop: $(this.hash).offset().top - h
}, 300);
});
});
JSFiddle

jQuery changing showText to a Div

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

Failed to Perform Flipping Box

I have been trying to applying flipping box just like on http://demo.rickyh.co.uk/flipping-crazy-css3/
I try to modified it a little but it doesn't work even i try to copy paste the source code it doesn't work at all.
so where did i do wrong? do i have to install specific javascript?
note: i'm just trying it on jsfiddle
here is the code
Javascript
var effectSpeed = 250;
function loadDemo(){
var vendor = (Browser.Engine.gecko) ? 'Moz' : ((Browser.Engine.webkit) ? 'Webkit' : '');
if(vendor == "Webkit"){
loadWebKit();
}
else if(vendor == "Moz"){
loadFox();
}
}
function loadWebKit(){
var newStyles = new Hash({
'webkitTransform': 'skew(#deg, #deg)'
});
$extend(Element.Styles, newStyles);
var elements = $("main").getElements(".flips");
// elements.setStyle("left", "0px");
$("main").getElements(".flips").each(function(item, index){
var currentStyles = item.getStyles("position", "left", "width", "height", "top");
var toggle = false;
item.addEvent('click', function(){
var extraT = 0;
var extraP = 0;
if(this.id == "flip4"){
extraT = 150;
}
if(this.id == "flip4"){
extraP = 500;
}
this.setStyle("overflow", "hidden");
var tp = this;
this.set('morph', {duration: effectSpeed+extraT, transition: 'Sine:in', onComplete: function(){
if(!toggle){
toggle = true;
item.addClass("toggleTrue");
}
else{
toggle = false;
item.removeClass("toggleTrue");
}
tp.setStyle('webkitTransform','skew(0deg, -20deg)');
tp.set('morph', {duration: effectSpeed+extraT, transition: 'Sine:out', onComplete: function(){
}});
tp.morph({
'width': currentStyles.width,
'left': currentStyles.left,
'webkitTransform': 'skew(0deg, 0deg)'
});
}});
this.morph({
'width': 0,
'left': parseInt(currentStyles.width)/2 + parseInt(currentStyles.left)+extraP,
'webkitTransform': 'skew(0deg, 20deg)'
});
});
});
}
function loadFox(){
$("webkit").getElement("span").innerHTML = "This ones webkit only"
var newStyles = new Hash({
'MozTransform': 'skew(#deg, #deg)'
});
$extend(Element.Styles, newStyles);
var elements = $("main").getElements(".flips");
elements.setStyle("MozTransform", "skew(0deg, 0deg)");
$("main").getElements(".flips").each(function(item, index){
var currentStyles = item.getStyles("position", "left", "width", "height", "top");
var toggle = false;
item.addEvent('click', function(){
var extraT = 0;
var extraP = 0;
if(this.id == "flip4"){
extraT = 150;
}
if(this.id == "flip4"){
extraP = 500;
}
this.setStyle("overflow", "hidden");
var tp = this;
this.set('morph', {duration: effectSpeed+extraT, transition: 'Sine:in', onComplete: function(){
if(!toggle){
toggle = true;
item.addClass("toggleTrue");
}
else{
toggle = false;
item.removeClass("toggleTrue");
}
tp.setStyle('MozTransform','skew(0deg, -20deg)');
tp.set('morph', {duration: effectSpeed+extraT, transition: 'Sine:out', onComplete: function(){
}});
tp.morph({
'width': currentStyles.width,
'left': currentStyles.left,
'MozTransform': 'skew(0deg, 0deg)'
});
}});
this.morph({
'width': 0,
'left': parseInt(currentStyles.width)/2 + parseInt(currentStyles.left)+extraP,
'MozTransform': 'skew(0deg, 20deg)'
});
});
});
}

Here's a simpler, cleaner way
DEMO http://jsfiddle.net/kevinPHPkevin/UC6fK/
$(document).ready(function(){
// set up hover panels
// although this can be done without JavaScript, we've attached these events
// because it causes the hover to be triggered when the element is tapped on a touch device
$('.hover').hover(function(){
$(this).addClass('flip');
},function(){
$(this).removeClass('flip');
});
});

Jquery - Animate innerHTML possible?

I'm trying to have a function that does setTimeout, then changes the innerHTML:
<script type="text/javascript">
$(document).ready(function(){
setTimeout(function(){
document.getElementById("middlecolor").innerHTML='new text new text';
}, 1000);
});
</script>
Question: How could I animate the new text that appears, i.e. line by line as opposed to being written all at once?
Thanks for any suggestions!!

Try something like this:
<div id="text">
</div>
$(document).ready(function () {
var interval = setInterval(function () {
$('#text').append('<p style="display: none;">new text</p>');
$('#text p:last').fadeIn('slow');
}, 5000);
});
See the example here
If you want to kill the interval, can be doing this:
clearInterval(interval);
Greatings.

Line-by-line is a bit tricky, but possible.
var ps = document.getElementById("text").children;
var i = 0;
var $p = $(ps[i]);
setTimeout(function newline(){
$p.css("height", function(index, h){
h = parseInt(h);
h += parseInt($p.css("line-height"));
console.log(h, ps[i].scrollHeight);
if (h > ps[i].scrollHeight)
$p = $(ps[++i]);
return h;
});
if (i < ps.length)
setTimeout(newline, 200);
}, 200);
I'd suggest to use a typewriter effect, which is also very likable: http://jsfiddle.net/pZb8W/1/
var ps = document.getElementById("text").children;
var i = 0;
var $p, text;
var speed = 20;
setTimeout(function newchar(){
if (!text) {
$p = $(ps[i++]);
text = $p.text();
$p.empty().show();
}
$p.append(document.createTextNode(text.charAt(0)));
text = text.slice(1);
if (text.length || i < ps.length)
setTimeout(newchar, Math.random()*speed+speed);
}, 3*speed);

Here's a function that would animate in multiple lines of text, one after the other:
<script type="text/javascript">
$(document).ready(function(){
function animateAddText(id, text, delta) {
var lines = text.split("\n");
var lineCntr = 0;
var target = $("#" + id);
function addLine() {
if (lineCntr < lines.length) {
var nextLine = "";
if (lineCntr != 0) {
nextLine = "<br>";
}
nextLine += lines[lineCntr++];
$("<span>" + nextLine + "</span>").hide().appendTo(target).fadeIn(1000);
setTimeout(addLine, delta);
}
}
addLine();
}
var multilineText = "First line\nSecond Line\nThird Line\nFourth Line\nFifth Line";
animateAddText("middlecolor", multilineText, 1000);
});
</script>
And a working demo: http://jsfiddle.net/jfriend00/Gcg5T/

Develop Reference

JavaScript is the programming language of the Web.

item shows individually - javascript

$('.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.

Related

jQuery - Multiple expanding galleries in tabs

Change link attribute when scrolling to anchor

jQuery changing showText to a Div

Failed to Perform Flipping Box

Jquery - Animate innerHTML possible?

Categories

Resources