Making automatic transition slideshow out of previously designed gallery - javascript

As title states, the website I have currently has a "click to go to next image" slide show as the banner image. I'm looking to turn it into a slideshow that automatically transitions from image to image but I'm not sure exactly how to do it.
The site can be found # rdesignmedia.com/testing/logo_you
The code is as follows:
<div class="camera_container">
<div class="camera_wrap" id="camera">
<div data-src="images/page-1_slide1.jpg">
<div class="camera_caption fadeIn">
<div class="jumbotron jumbotron1">
<em>On Tour</em>
<div class="wrap">
<p>Engineered Elegance</p>
</div>
</div>
</div>
</div>
<div data-src="images/page-1_slide2.jpg">
<div class="camera_caption fadeIn">
<div class="jumbotron jumbotron2">
<em>ELEVATE</em>
<div class="wrap">
<p>Your Brand Lives Here.</p>
</div>
</div>
</div>
</div>
<div data-src="images/page-1_slide3.jpg">
<div class="camera_caption fadeIn">
<div class="jumbotron">
<em>Tech Branding</em>
<div class="wrap">
<p>Stand out from the crowd with technological branding</p>
</div>
</div>
</div>
</div>
</div>
</div>

Looking at the site you can do this after the page loads:
// Creates an interval that runs the function every 2 seconds
setInterval(
function () {
// Finds the ul holding the little dots
var ul = $(".camera_pag_ul");
// Finds the currently selected dot
var selected = ul.find('.cameracurrent');
// Finds the next dot to click
var next = selected.next('li');
// If the next dot exists click it, else start over with first one
if (next.length != 0) {
next.click();
}
else {
ul.find('li:first').click();
}
}, 2000
);
This works if I run it in the console on the site. This switches the image every 2 seconds. You can obviously change the 2000 to something else to increase the time the images is displayed before the next one shows.

Related

How can i continuesly using appenTo() when i click a button?

im trying to reverse div with Jquery which when i click a button the divs will reverse and switch place
<div class="player1">
<div class="player1-a">
<div class="pemain p1a">
<h4>Samsudin</h4>
</div>
<div class="cock 1a">
</div>
</div>
<div class="player1-b">
<div class="pemain p1b">
<h4>Joko</h4>
</div>
<div class="cock 1b">
</div>
</div>
</div>
<button class="btn btn-light score_plus" id="score_kiri"><h1>SCORE</h1></button>
whenever this button clicked the div p1b will move to div player1-a and so do div p1a will move to div player1-b.
Here's my jquery code that the divs only move once and dont move again when i click again.
$('#score_kiri').click(function() {
$('#player_kiri').val(i++);
$('.p1a').appendTo('.player1-b');
$('.1a').appendTo('.player1-b');
$('.p1b').appendTo('.player1-a');
$('.1b').appendTo('.player1-a');
$('.p1a').append('.player1-b');
$('.1a').append('.player1-b');
$('.p1b').append('.player1-a');
$('.1b').append('.player1-a');
});
Your issue is that you have hard-coded the elements to move, rather than use relative positions. Effectively saying "make it exactly like this" rather than "move the first one to the end" (which I believe is what you're trying to do).
You can select the first one various ways, here's one:
$(".player1 > div").first()
Using .appendTo(".player1") with this will move the element to the end - so by always moving the first to the end you get your "continuously appendTo". If you have 3, then first will move to the end each time.
This is slightly different from "switching places" but has the same effect when only 2.
Updated snippet:
$("#btn").click(() =>
$(".player1 > div").first().appendTo(".player1")
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="player1">
<div class="player1-a">
<div class="pemain p1a">
<h4>p1a Samsudin</h4>
</div>
<div class="cock 1a">1a
</div>
</div>
<div class="player1-b">
<div class="pemain p1b">
<h4>p1b Joko</h4>
</div>
<div class="cock 1b">
1b
</div>
</div>
</div>
<button id=btn>
click me
</button>

Start the WOW animation.js without page reload

There's a problem I don't know how to solve. I did an animation of buttons appearing with WOW.js, but when I press the button I need the elements to disappear with the same animation. The concept is that when you press the button, the reverse animation starts, and then I hide the object using setInterval and display: 'none'. But I can't start manually so that when I press the button the animation starts againю
HTML
<div class="col-6">
<button class="answer-block wow fadeInLeft" id="firstAnswer">A</button>
</div>
<!-- /.col-6 -->
<div class="col-6">
<button class="answer-block wow fadeInRight" id="secondAnswer">B</button>
</div>
<!-- /.col-6 -->
</div>
<!-- /.row -->
JS
let firstAnswer = document.getElementById('firstAnswer');
let secondAnswer = document.getElementById('secondAnswer');
firstAnswer.onclick = function (){
firstAnswer.classList.remove('fadeInLeft');
secondAnswer.classList.remove('fadeInRight');
firstAnswer.classList.add('fadeOutLeft');
secondAnswer.classList.add('fadeOutRight');
}

JQuery hide() not persisting after hide event

I'm trying to hide a visible section then show a hidden section using JQuery .hide() and .show(). When the event fires (on clicking an image) it only hides the visible section momentarily, then becomes visible again with the previously hidden section now visible below the first visible section. Based on the docs I've read and some tutorials I've watched this shouldn't be happening.
HTML:
<div class="transition-div">
<section class="project-section">
<div class="project-wrapper" id="project-one">
<div class="desc-text">
<h2>Header</h2>
</div>
<div class="project-image-wrapper">
<img class="project-image" id="project-img-one" src="images/img1.png">
<button class="project-button">Button
</button>
</div>
</div>
</section>
<section class="project-section hidden">
<div class="project-wrapper">
<div class="desc-text">
<h2>Header</h2>
<p>Some description text</p>
</div>
<div class="project-image-wrapper">
<img class="project-image" src="images/img1.png">
</div>
</div>
</section>
</div>
JS:
$('.hidden').hide();
var slideSection = function() {
$('.project-image-wrapper').click(function() {
var $parentDiv = $(this).parents('.transition-div');
var $childToShow = $parentDiv.find('.hidden');
var $childToHide = $childToShow.siblings('.project-section');
$childToHide.hide(300, hideActiveSection());
function hideActiveSection() {
$childToHide.addClass('hidden');
$childToShow.show(300, function() {
$(this).removeClass('hidden');
});
}
});
};
slideSection();
How would I get the section I want to hide to do so persistently until I click the currently visible project image to show it? Could my CSS be interfering with what I want to do here? If so I'll post the code. Thanks!

Detecting whether mouse is in an element with jQuery

I have a web page that uses jQuery. My page looks something like this:
<div id="page">
<!-- Stuff here -->
<div id="content">
<div class="row">
<div class="col"><!-- stuff --></div>
<div class="col"><!-- stuff --></div>
<div class="col"><!-- stuff --></div>
<div class="col"><!-- stuff --></div>
</div>
<div class="row">
<div class="col"><!-- stuff --></div>
<div class="col"><!-- stuff --></div>
<div class="col"><!-- stuff --></div>
</div>
</div>
<!-- Stuff here -->
</div>
<div id="note" style="display:none;">
<!-- stuff here -->
</div>
var noteTimeout = null;
var note = $('#note');
$(".row")
.mouseover(function () {
var col = $(this).find('.col:last');
var p = col.position();
note.css({zIndex:1000, top: p.top, left: (p.left + col.width() - note.width()/2) });
note.show();
})
.mouseout(function (e) {
if (noteTimeout != null) {
clearTimeout(noteTimeout);
}
noteTimeout = setTimeout(function () {
note.fadeOut(150);
}, 250);
})
;
Basically, when a user hovers over a row, I'm trying to show a note in the last column of the row. If a user moves to another row, the note moves to that row. However, if the user's mouse is outside of the "content" area, I want to hide the note after 250 milliseconds. The last requirement is causing me problems.
As it is, the note disappears after 250 milliseconds if I change rows. However, if I remove the timeout, the note flickers if a user moves their mouse over it.
You want to use .hover for the element (in this case an array of elements) which detects as the mouse enters and leaves. It's an expansion of the functionality of .mouseenter() & .mouseleave().
This is will make it so that whilst the mouse is over the element it will do something rather than .mouseover which simply triggers an event.
This is explained further by Navin Rauniyar here

Overriding preceding function in javascript

Say I have many div "pages" set up like this:
<script type="text/javascript">
$('.link').on('click', function(e){
fadeOutPage();
$(this.getAttribute("href")).fadeIn(); //fade in clicked page
});
function fadeOutPage() {
$('#container>div').fadeOut(); //fade out all displayed pages
}
</script>
page 1
page 2
page 3
....
....
<div id="container">
<div id="page1">
<div class="navbar"> contents of navbar 1 </div>
<div class="pagecontents"> contents of page 1 </div>
<div class="pagefooter"> more contents for page 1 </div>
</div>
<div id="page2">
<div class="navbar"> contents of navbar 2 </div>
<div class="pagecontents"> contents of page 2 </div>
<div class="pagefooter"> more contents for page 2 </div>
</div>
<div id="page3">
<div class="navbar"> contents of navbar 3 </div>
<div class="pagecontents"> contents of page 3 </div>
<div class="pagefooter"> more contents for page 3 </div>
</div>
...
...
</div>
This works as I intend it, fade out all pages then fade in the clicked page when I click a link. But I want to delay the fade in of ".pagefooter", for let's say 1000ms, but keep ".pagefooter" inside the parent div "#pageX". Right now when I call "$(this.getAttribute("href")).fadeIn();" it will fade in "#pageX" all at the same time.
How do I override that so I can insert a settimeout(function() {('.pagefooter').fadeIn()},1000) somewhere, so that everything else except ".pagefooter" fades in normally, then ".pagefooter" fades in 1000ms afterwards?
EDIT: Here you go:
$('#page1').show().find('div').hide().filter(function () {
return !$(this).hasClass('pagefooter');
}).fadeIn().add('.pagefooter').delay(1000).fadeIn();
Here's a working demo: http://jsfiddle.net/mFjg5/1

Categories