Horizontal Sliding Panels in Wordpress, showing the first panel

Horizontal Sliding Panels in Wordpress, showing the first panel - javascript

I am creating a sliding panel with jQuery on a home page with 5 panels with the code below.
<script type="text/javascript">
jQuery(function($) {
$('a.panel').click(function() {
var $target = $($(this).attr('href')),
$other = $target.siblings('.active');
if (!$target.hasClass('active')) {
$other.each(function(index, self) {
var $this = $(this);
$this.removeClass('active').animate({
left: $this.width()
}, 500);
});
$target.addClass('active').show().css({
left: -($target.width())
}).animate({
left: 0
}, 500);
}
});
});
Currently I need to click to view a panel. Is there a way I can make the first panel show without clicking?
The HTML is:
<div class="panel" id="target1" >
<div class="inner blue">
<?php the_field( "dm" );?>
</div>
</div>
<div class="panel" id="target2">
<div class="inner green">
<?php the_field( "rd" );?>
</div>
</div>
<div class="panel" id="target3">
<div class="inner brown">
<?php the_field( "cd" );?>
</div>
</div>
..etc

Related

Place content from a clicked element into another element

Hi I am looking to place content from a child element into another element.
I have a hidden div called "DetailsExpanded" and a series of items called "IconWrapper". On clicking "IconWrapper" I would like to copy the content from that items "ItemDetail" Into "DetailsExpanded" and slide down "DetailsExpanded" with said content
Please see below my html structure.
I have begin on the sliding js but I am a bit out of my depth unfortunately.
$( ".IconWrapper" ).click(function () {
if ( $( ".DetailsExpanded" ).is( ":hidden" ) ) {
$( ".DetailsExpanded" ).slideDown( "fast" );
} else {
$( ".DetailsExpanded" ).hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="DetailsExpanded"></div>
<div class="IconWrapper">
<div class="ItemDetail">Content to copy</div>
<div class="Icon icon-icons-d-steps"></div>
</div>
<div class="IconWrapper">
<div class="ItemDetail">Content to copy</div>
<div class="Icon icon-icons-d-steps"></div>
</div>
<div class="IconWrapper">
<div class="ItemDetail">Content to copy</div>
<div class="Icon icon-icons-d-steps"></div>
</div>

All you have to do is to take the .html() of the clicked element and to set it in your .DetailsExpanded element :
$(".IconWrapper").on("click", function() {
var content = $(this).find(".ItemDetail").html();
$(".DetailsExpanded").html(content);
$(".DetailsExpanded").slideToggle("fast"); // this replaces slideDown or hide
});

$( ".IconWrapper" ).click(function () {
var text = $(this).find('.ItemDetail').text();
$( ".DetailsExpanded" ).html(text).slideDown( "slow" );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="DetailsExpanded"></div>
<div class="IconWrapper">
<div class="ItemDetail">Content to copy1</div>
<div class="Icon icon-icons-d-steps"></div>
</div>
<div class="IconWrapper">
<div class="ItemDetail">Content to copy2</div>
<div class="Icon icon-icons-d-steps"></div>
</div>
<div class="IconWrapper">
<div class="ItemDetail">Content to copy3</div>
<div class="Icon icon-icons-d-steps"></div>
</div>
Is this what you are looking for ?

$(document).ready(function(){
$('.IconWrapper').on('click', function(e) {
$(".DetailsExpanded").text($(this).text()).slideDown();
});
});

Animate a div when scrolling page

i want to annimate 3 divs when the user scroll down the page, i followed many ttorials, it didn't work any suggestions how to do it, because the divs haz a defined css classes this is the divs . i wante them to fade up or down or any cool anniation how to acomplish this . please .
<section >
<div class="container">
<h1> PRODUITS </h1>
<div class="row">
<a href="pehdeauFrame.php">
<div id="mudivsho" class="col-md-4 col-sm-4">
<div class="panel panel-default">
<div class="panel-body">
<h4 style="text-align:center;" class="adjst">Tubes PEHD pour Eaux </h4>
<img id="imgeaudiv" src="assets/images/diveau.jpg">
</div>
</div>
</div>
</a>
<a href="pehdTelecomFrame.php">
<div id="mudivsho" class="col-md-4 col-sm-4">
<div class="panel panel-default">
<div class="panel-body">
<h4 style="text-align:center;" class="adjst">PEHD pour gaine Fibre Optique</h4>
<img id="imgeaudiv" src="assets/images/divtelecom.jpg">
</div>
</div>
</div>
</a>
<a href="http://www.mansouriplast.com/">
<div id="mudivsho" class="col-md-4 col-sm-4">
<div class="panel panel-default">
<div class="panel-body">
<h4 style="text-align:center;" class="adjst">Tubes PVC</h4>
<img id="imgeaudiv" src="assets/images/divpvc.jpg">
</div>
</div>
</div>
</a>
</div>
</div>
</section>

I suppose you can find out how to make it on this website:
https://css-tricks.com/aos-css-driven-scroll-animation-library/

This javascript will allow you to move a div.
$(document).ready(function(){
$("button").click(function(){
$("div").animate({left: '250px'});
});
});
and this will allow you to make an object appear (fade) on scroll:
$('.back-to-top').css({"display": "none"});
jQuery(document).ready(function() {
var offset = 25;
var duration = 300;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.back-to-top').fadeIn(duration);
} else {
jQuery('.back-to-top').fadeOut(duration);
}
});
jQuery('.back-to-top').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
});
});
So, what you may want is:
$('#mudivsho').css({"display": "none"});
jQuery(document).ready(function() {
var offset = 25; /* pixels you have to scroll to the div show up (fade) [you can change] */
var duration = 300; /* Duration of the fade (you can change) */
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('#mudivsho').fadeIn(duration);
} else {
jQuery('#mudivsho').fadeOut(duration);
}
});
jQuery('#mudivsho').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
});
});
See if this works.

you can animate like this.
$("document").ready(function(){
$(window).scroll(function(){
$("#mudivsho1").animate({left: "10%",top: "30%",width: "20%",height: "30%",margin: "0 10%"}, 500);
$("#mudivsho2").animate({left: "50%",top: "50%",width: "40%",height: "30%",margin: "0 20%"}, 500);
$("#mudivsho3").animate({left: "100%",top: "70%",width: "80%",height: "30%",margin: "0 30%"}, 500);
});
});
Demo: http://codesheet.org/cs/ZWLNfwqa

Some Buttons and Hover Effect Disabled

I created an onboarding walkthrough tour for use in a SaaS App that is being loaded with A/B testing software. The tour automatically begins on initial page load. The user can close the tour at any time. I have used localStorage so the browser will recall at what point the user exits the page and that tour will start again at the further point in the tour. I also have a "replay" button that is disabled when the tour is running and enabled when the tour is finished or closed. The replay button's selector is ".tstour-replay". I am animating the movement of the tour steps by adding a class that is using CSS3 #keyframes rules and then delaying the removal of the class so that the animation will repeat if the user goes back and uses that Next animation again. Those are referred to as "popover-ani1", "popover-ani2" and so on.
I am having an issue that is not consistently happening so I cannot find a pattern that explains why it's happening. Sometimes, the Next and Back buttons of the individual tour modals, referred to in the code as #popoverid1, #popoverid2, and so on or #popoverback1, #popoverback2, and so on, will be disabled. They do not respond to clicks and they both have CSS hover effects that do not work properly. However, the close button, .popover-close, always works. I cannot figure out why sometimes the Next and Back buttons are just completely unclickable and lose their interactivity while the Close button is always fine.
I am fairly new to JavaScript and jQuery.
Here's my JavaScript code:
function tourFunction() {
$(".tstour-replay").addClass("tstour-replay-disable");
$("#tstour-start").click(function(){
//if clicked, do nothing
});
$("#popoverid1").click(function() {
$(".popover1").addClass("popover1-ani").delay(200).fadeOut(50);
$(".popover2").delay(250).fadeIn(50);
setTimeout(function() {
$(".popover1").removeClass("popover1-ani");
}, 250);
});
$("#popoverid2").click(function() {
$(".popover2").fadeOut(50);
$(".popover3").delay(50).fadeIn(50);
});
$("#popoverback2").click(function() {
$(".popover2").addClass("popoverback2-ani").delay(200).fadeOut(50);
$(".popover1").delay(250).fadeIn(50);
setTimeout(function() {
$(".popover2").removeClass("popoverback2-ani");
}, 250);
});
$("#popoverid3").click(function() {
$(".popover3").addClass("popover3-ani").delay(200).fadeOut(50);
$(".popover4").delay(250).fadeIn(50);
setTimeout(function() {
$(".popover3").removeClass("popover3-ani");
}, 250);
});
$("#popoverback3").click(function() {
$(".popover3").addClass("popoverback3-ani").delay(200).fadeOut(50);
$(".popover2").delay(250).fadeIn(50);
setTimeout(function() {
$(".popover3").removeClass("popoverback3-ani");
}, 250);
});
$("#popoverid4").click(function() {
$(".popover4").addClass("popover4-ani").delay(200).fadeOut(50);
$(".popover5").delay(250).fadeIn(50);
setTimeout(function() {
$(".popover4").removeClass("popover4-ani");
}, 250);
});
$("#popoverback4").click(function() {
$(".popover4").addClass("popoverback4-ani").delay(200).fadeOut(50);
$(".popover3").delay(250).fadeIn(50);
setTimeout(function() {
$(".popover4").removeClass("popoverback4-ani");
}, 250);
});
$("#popoverid5").click(function() {
$(".popover5").addClass("popover5-ani").delay(200).fadeOut(50);
$(".popover6").delay(250).fadeIn(50);
setTimeout(function() {
$(".popover5").removeClass("popover5-ani");
}, 250);
});
$("#popoverback5").click(function() {
$(".popover5").addClass("popoverback5-ani").delay(200).fadeOut(50);
$(".popover4").delay(250).fadeIn(50);
setTimeout(function() {
$(".popover5").removeClass("popoverback5-ani");
}, 250);
});
$("#popoverid6").click(function() {
$(".popover6").addClass("popover6-ani").delay(200).fadeOut(50);
$(".popover7").delay(250).fadeIn(50);
setTimeout(function() {
$(".popover6").removeClass("popover6-ani");
}, 250);
});
$("#popoverback6").click(function() {
$(".popover6").addClass("popoverback6-ani").delay(200).fadeOut(50);
$(".popover5").delay(250).fadeIn(50);
setTimeout(function() {
$(".popover6").removeClass("popoverback6-ani");
}, 250);
});
}
function tourReplay() {
$(".tstour-replay").removeClass("tstour-replay-disable");
$("#tstour-start").click(function() {
$(".tstour-replay").addClass("tstour-replay-disable");
$(".popover1").fadeIn("fast");
});
}
function disableTourReplay() {
$(".tstour-replay").removeClass("tstour-replay-disable");
$("#tstour-start").click(function() {
//if clicked, do nothing
});
}
//END FUNCTIONS
$(".popover-btn-start").click(function() {
$(".tour-container").fadeOut();
$(".popover7").fadeOut();
$(".tstour-replay").removeClass("tstour-replay-disable");
$("#tstour-start").click(function() {
//if clicked, do nothing
});
tourReplay();
});
$(".popover-close").click(function(){
$(".tour-container").fadeOut();
$(".popover").fadeOut();
tourReplay();
});
//BEGIN FUNCTION TRIGGERS
var trigger_flag = localStorage.getItem('tstour');
if (!trigger_flag) {
disableTourReplay();
$(".popover1").fadeIn("fast");
tourFunction();
} else if (trigger_flag == '1') { //clicked next1
disableTourReplay();
$(".popover2").fadeIn("fast");
tourFunction();
} else if (trigger_flag == '2') { //clicked next2
disableTourReplay();
$(".popover3").fadeIn("fast");
tourFunction();
} else if (trigger_flag == '3') { //clicked next3
disableTourReplay();
$(".popover4").fadeIn("fast");
tourFunction();
} else if (trigger_flag == '4') { //clicked next4
disableTourReplay();
$(".popover5").fadeIn("fast");
tourFunction();
} else if (trigger_flag == '5') { //clicked next5
disableTourReplay();
$(".popover6").fadeIn("fast");
tourFunction();
} else if (trigger_flag == '6' || '7') { //got to last popover, finished tour or closed out
tourReplay();
}
//END FUNCTION TRIGGERS
//BEGIN LOCAL STORAGE SET
$(document).on("click", "#popoverid1", function(e){
localStorage.setItem('tstour', '1');
});
$(document).on("click", "#popoverid2", function(e){
localStorage.setItem('tstour', '2');
});
$(document).on("click", "#popoverid3", function(e){
localStorage.setItem('tstour', '3');
});
$(document).on("click", "#popoverid4", function(e){
localStorage.setItem('tstour', '4');
});
$(document).on("click", "#popoverid5", function(e){
localStorage.setItem('tstour', '5');
});
$(document).on("click", "#popoverid6", function(e){
localStorage.setItem('tstour', '6');
});
$(document).on("click", ".popover-btn-start", function(e){
localStorage.setItem('tstour', '7');
});
$(document).on("click", ".popover-close", function(e){
localStorage.setItem('tstour', '7');
});
And here is the HTML
<div class="tour-centered">
<div id="tstour-start" class="tstour-replay">How Does This Work?</div>
<div class="popover popover1">
<div class="popover-right">
<div id="popover-close" class="popover-close">
</div>
<div class="popover-content">
<div class="popover-title">Employees On Your Calendar</div>
<div class="popover-body">Here's Jane Deaux, a sample employee. I preloaded some events for her in your calendar.</div>
<div class="popover-footer">
<div class="popover-progress">1 of 6</div>
<div class="popover-buttons">
<div class="popover-next" id="popoverid1">Next</div>
</div>
</div>
</div>
</div>
</div>
<div class="popover popover2">
<div class="popover-above">
<div id="popover-close" class="popover-close">
</div>
<div class="popover-content">
<div class="popover-title">Calendar Events</div>
<div class="popover-body">Notice Jane's name on the calendar. Each listing is a scheduled or pending calendar event.
<br />
<br />Hover your mouse over her name to quickly see the event details.</div>
<div class="popover-footer">
<div class="popover-progress">2 of 6</div>
<div class="popover-buttons">
<div class="popover-back" id="popoverback2">Back</div>
<div class="popover-next" id="popoverid2">Next</div>
</div>
</div>
</div>
</div>
</div>
<div class="popover popover3">
<div class="popover-above">
<div id="popover-close" class="popover-close">
</div>
<div class="popover-content">
<div class="popover-title">Add a New Calendar Event</div>
<div class="popover-body">Double-click on any day to create a new calendar event. Use Jane to try it out and deduct hours from her time-off banks.
<br /><br />Give it a try. I'll wait right here until you're done.<br /></div>
<div class="popover-footer">
<div class="popover-progress">3 of 6</div>
<div class="popover-buttons">
<div class="popover-back" id="popoverback3">Back</div>
<div class="popover-next" id="popoverid3">Next</div>
</div>
</div>
</div>
</div>
</div>
<div class="popover popover4">
<div class="popover-below">
<div id="popover-close" class="popover-close">
</div>
<div class="popover-content">
<div class="popover-title">Create More Calendar Events</div>
<div class="popover-body">Great job! You can also click this icon to create more calendar events.</div>
<div class="popover-footer">
<div class="popover-progress">4 of 6</div>
<div class="popover-buttons">
<div class="popover-back" id="popoverback4">Back</div>
<div class="popover-next" id="popoverid4">Next</div>
</div>
</div>
</div>
</div>
</div>
<div class="popover popover5">
<div class="popover-below">
<div id="popover-close" class="popover-close">
</div>
<div class="popover-content">
<div class="popover-title">Customize Your Calendar</div>
<div class="popover-body">Visit Preferences to customize your calendar event codes, create time-off plans, and much more.</div>
<div class="popover-footer">
<div class="popover-progress">5 of 6</div>
<div class="popover-buttons">
<div class="popover-back" id="popoverback5">Back</div>
<div class="popover-next" id="popoverid5">Next</div>
</div>
</div>
</div>
</div>
</div>
<div class="popover popover6">
<div class="popover-below">
<div id="popover-close" class="popover-close">
</div>
<div class="popover-content">
<div class="popover-title">Add More Employees</div>
<div class="popover-body">When you're ready, add more of your employees and create calendar events for them.
<br />
<br />The more employees you load and track, the easier it is to avoid scheduling conflicts.</div>
<div class="popover-footer">
<div class="popover-progress">6 of 6</div>
<div class="popover-buttons">
<div class="popover-back" id="popoverback6">Back</div>
<div class="popover-next" id="popoverid6">Next</div>
</div>
</div>
</div>
</div>
</div>
<div class="popover popover7">
<div class="popover-content-final">
<div class="popover-title-final">Ready to Take Back Your Time?</div>
<div class="popover-btn-start">Start Tracking!</div>
<div class="popover-help">
<a href="https://tracksmart.zendesk.com/hc/en-us/requests/new" target="_blank">
I Need Some Help
</a></div>
</div>
</div>
</div>

Jquery Accordion first panel auto opened

Can i set first panel on Jquery automatically opened?
My accordion panel is close all.
This is my html
<div class="accordionx">
<div class="acitemx">
<h3>First Panel</h3>
<div class="accx">
This is the content
</div>
</div>
<div class="acitemx">
<h3>Second Panel</h3>
<div class="accx">
This is the content
</div>
</div>
<div class="acitemx">
<h3>Third Panel</h3>
<div class="accx">
This is the content
</div>
</div>
This is my JS script
$(".acitemx h3").click(function () {
$header = $(this);
$content = $header.next();
$content.slideToggle(500, function () {
$(this).parent().toggleClass('current');
});
});
This the JSFiddle Link http://jsfiddle.net/bupd32rq/
Thanks for your help

Panels that opened were added with current class, then put class current manually on first panel and respective div with style="display:block":
<div class="acitemx current">
<h3>First Panel</h3>
<div class="accx" style="display:block">
This is the content
</div>
</div>
Updated DEMO

you can just add .eq(0).click()
$(".acitemx h3").click(function () {
$header = $(this);
$content = $header.next();
$content.slideToggle(500, function () {
$(this).parent().toggleClass('current');
});
}).eq(0).click();
DEMO

JQuery isotope with Swipe plugins - problems reload elements

I am using the jQuery Isotope and Swipe plugin for a Photo gallery. I want to reload all the items when i close the gallery Swipe but there is a problem. All the items aren't reload very well and when i try to select a new category of items, they just split far from the others. I try lot of things like isotope('reloadItems'), isotope('reLayout') but without success.
I don't know where the problem come.
This pages will show you what i mean : http://digitale-photographie.fr/portfolio.php
Also, code samples:
portfolio.php
<div id="sort">
Tous
Soirée
Mariage
Portrait
Grossesse
Publicité
Industrie
</div>
<div id="photogrid">
<?php
for ($j=0;$j<=$i-1;$j++)
{
$image_mini = '<img src="photos/portfolio/thumbnails/'.$tab_image_mini[$j].'" />';
echo '<div class="thumbnail '.$tab_class[$j].'" data-background="photo.image.large"><a class="thumb">'.$image_mini.'</a></div>';
}
?>
</div>
<div id="mainimage">
<div id='photos' class='swipe'>
<div class='swipe-wrap'>
<?php
for ($j=0;$j<=$i-1;$j++)
{
echo '<div class="img '.$tab_class[$j].'" data-image="photos/portfolio/zoom/'.$tab_image_zoom[$j].'" data-width="1024" data-height="702">
<div class="ui photoinfo hidden">
<!-- Photo Title & Description -->
<h2 class="phototitle">Runaway...</h2>
<!-- Metadata -->
<ul class="metadata"></ul>
</div>
</div>';
}
?>
</div>
</div>
<div class="ui button backbutton hidden">
<div class="chevron">
<div class="upper"></div>
<div class="lower"></div>
</div>
<p>Retourner à la galerie</p>
</div>
<div class="ui photonav button prev hidden">
<div class="chevron">
<div class="upper"></div>
<div class="lower"></div>
</div>
</div>
<div class="ui photonav button next hidden">
<div class="chevron">
<div class="upper"></div>
<div class="lower"></div>
</div>
</div>
</div>
js code
$(document).ready(function() {
$(window).load(function(){
var $container = $('#photogrid');
$container.isotope({
filter: '*',
animationOptions: {
duration: 750,
easing: 'linear',
queue: false,
}
});
$('#sort a').click(function(){
var selector = $(this).attr('data-filter');
/*$('.img').isotope({
filter: selector,
animationOptions: {
duration: 750,
easing: 'linear',
queue: false,
}
});*/
$container.isotope({
filter: selector,
animationOptions: {
duration: 750,
easing: 'linear',
queue: false,
}
});
return false;
});
});
// hide photo view with back button
$('.backbutton').click(function() {
// Hide photo layer and current photo
mainimageElement.removeClass('visible black');
$('.ui').addClass('hidden');
if (isTouchDevice()) {
headerElement.removeClass('hidden');
}
$('#photogrid').isotope( 'reloadItems' ).isotope();
mainimageElement.removeAttr('style');
thumbnailElements.removeAttr('style');
sortElement.removeAttr('style');
headerElement.removeClass('opaque');
setHeaderOpacity();
// put selected thumbnail back in its place
retractThumbnail(selectedThumbnail);
retractThumbnail(selectedSort);
setTimeout(function() {
// animate in other thumbnails
var delay = 0;
thumbnailElements.each(function() {
delay = delay + 10;
var $this = $(this);
setTimeout(function() {
$this.removeClass('background');
}, delay);
});
}, 1)
});
Thanks for helping :)

Develop Reference

JavaScript is the programming language of the Web.

Horizontal Sliding Panels in Wordpress, showing the first panel - javascript

Related

Place content from a clicked element into another element

Animate a div when scrolling page

Some Buttons and Hover Effect Disabled

Jquery Accordion first panel auto opened

JQuery isotope with Swipe plugins - problems reload elements

Categories

Resources