I have a kind of splash screen, where you press one of the logo's and it animates the logo to the center, then loads the content for it. Then when you press the main top logo, it hides the content and goes back to the splash screen. However I am having problems with this.
Such as, the container hides, then comes back.
Look for yourself: http://dan.roguedraco.net/SpyroDev/
If happens if you click the top logo before the content has fully appeared, but I want to allow for all these occurences. Because it is possible a user may do the same.
Javascript:
$(document).ready(function() {
var inPage = false;
$('.ajax-loader').click(function() {
if(inPage == false) {
inPage = true;
var Obj = this;
$(Obj).siblings("a").fadeOut(500,function() {
if($(Obj).hasClass('left') || $(Obj).hasClass('right')) {
$(Obj).animate({left:'300px'},'slow','easeOutBack',function() {
$('#pageContent').fadeIn(500,function() {
$("#tabs").tab();
});
});
}
else {
$('#pageContent').fadeIn(500,function() {
$("#tabs").tab();
});
}
$(Obj).addClass('current-project');
});
}
});
$('#rootLogo').click(function() {
var Obj = $('.current-project');
if(inPage == true) {
inPage = false;
$('#pageContent').fadeOut(500,function() {
$(this).hide();
if($(Obj).hasClass('left')) {
$(Obj).animate({left:'0px'},'slow','easeOutBack',function() {
$(Obj).siblings("a").fadeIn(500);
});
}
else if($(Obj).hasClass('right')) {
$(Obj).animate({left: '600px'},'slow','easeOutBack',function() {
$(Obj).siblings("a").fadeIn(500);
});
}
else {
$(Obj).siblings("a").fadeIn(500);
}
$(Obj).removeClass('current-project');
});
}
});
});
Html:
<div id="thumbnails">
<div class="row-fluid">
<div class="span12" style="text-align: center;color:#fafafa;">
Click a plugin title for more information and downloads.
</div>
</div>
<div class="row-fluid">
<div class="span12" id='thumbnails'>
<img src="projects/JumpPorts/thumb.png" alt="JumpPorts" />
<img src="projects/RankUpOnKills/thumb.png" alt="RankUpOnKills" />
<img src="projects/InfoButton/thumb.png" alt="InfoButton" />
</div>
</div>
</div>
<div id="pageContent" style="display:none;">
<div class="row-fluid">
...
.stop()
have you tried to use .stop() before your .animate() and .fadeIn() and other animate methods? like: $(Obj).stop().animate({left:
Have you consider to not make the "" of the logo itself clickable? I mean, you're making your event ready whenever it's clicked.
Try this:
In the event of .ajaxloader add on the logo image a sorrounding it at the end of the code of the event.
Then you switch:
$('#rootLogo').click(function() {
var Obj = $('.current-project');
....
}
for this:
$('#click-event').click(function() {
// Assuming #click-event is the name of the span you placed
var Obj = $('.current-project');
.....
}
and in the end you delete the span created on the .ajaxloader.click event
It's an idea, you can use it, tell me if it worked
Related
I have a Menu for a website that is broken into two parts.
A left hand panel and a right hand panel.
When clicking one of the two menu buttons the panel slides in from the side and covers the browser window.
At the moment I have got the function working.
Where I am getting stuck is creating the logic for the function using conditionals that say:
'If the left panel is 'active' / 'visible' and the right panel button is clicked, slide the left panel out of view while sliding in the right panel.'
and Vise Versa.
Here is the js-fiddle and below is the code:
NOTE: I've tried to fire an alert when the class name .panel--oneBtn.is-active yet nothing is happening. Thanks
HTML
<div class="wrapper">
<div class="nav_header">
<div class='nav_header_link_wrap abso-left panel--oneBtn'>
<span class="nav_header_link abso-left open">Eat.Drink.Sleep</span>
<span class="nav_header_link abso-left close">Close</span>
</div>
<div class='nav_header_link_wrap abso-right panel--twoBtn'>
<span class="nav_header_link abso-right open">Bookings/Contact</span>
<span class="nav_header_link abso-right close">Close</span>
</div>
</div>
<div class="menuPanel panel--one"></div>
<div class="menuPanel panel--two"></div>
</div>
JS
function navSlider(){
var $buttonOne = $('.panel--oneBtn'),
$buttonTwo = $('.panel--twoBtn');
$buttonOne.on('click', function() {
$('.panel--one').toggleClass('is-visible');
$buttonOne.find('.open').toggleClass('is-gone');
$buttonOne.find('.close').toggleClass('is-visible');
$(this).toggleClass('is-active');
});
$buttonTwo.on('click', function() {
$('.panel--two').toggleClass('is-visible');
$buttonTwo.find('.open').toggleClass('is-gone');
$buttonTwo.find('.close').toggleClass('is-visible');
$(this).toggleClass('is-active');
});
if ( $buttonOne.hasClass('is-active') ){
alert('Left is active');
} else if ($buttonTwo.hasClass('is-active') ){
alert('Right is active');
}
}
navSlider();
Is this effect what you're looking for?
https://jsfiddle.net/snookieordie/oez0488h/41/
$buttonOne.on('click', function() {
//added this code
if ( $buttonTwo.hasClass('is-active') ) {
$('.panel--two').toggleClass('is-visible');
$buttonTwo.find('.open').toggleClass('is-gone');
$buttonTwo.find('.close').toggleClass('is-visible');
$buttonTwo.toggleClass('is-active');
}
//
$('.panel--one').toggleClass('is-visible');
$buttonOne.find('.open').toggleClass('is-gone');
$buttonOne.find('.close').toggleClass('is-visible');
$(this).toggleClass('is-active');
});
$buttonTwo.on('click', function() {
//added this code
if ( $buttonOne.hasClass('is-active') ) {
$('.panel--one').toggleClass('is-visible');
$buttonOne.find('.open').toggleClass('is-gone');
$buttonOne.find('.close').toggleClass('is-visible');
$buttonOne.toggleClass('is-active');
}
//
$('.panel--two').toggleClass('is-visible');
$buttonTwo.find('.open').toggleClass('is-gone');
$buttonTwo.find('.close').toggleClass('is-visible');
$(this).toggleClass('is-active');
});
I'm learning jQuery and I need to figure out how to not hard-code. So I have 2 different divs (master and popup) being populated by an array. The first div (master) is visible and the second (popup) that I'm using as a pop-up is hidden. On the view, you see an image in the div( master) and when it is clicked, I have a jQuery function that triggers the hidden div (popup) to show up.
Now if 10 items are gotten from the array, I have 10 images displaying but when I click on any image (including the first), only the first image in the array populates the popup div.
I hard-coded a 'fix' based on my current jQuery knowledge but this is repetitive code which means I can only have the amount of divs declared in my jQuery. I need to find a way that each image displays it's corresponding popup without having to hard code it in all the way
My html code:
Master div:
<div class="master">
<div id="imgprop"><img src="IMGCOMP/bgggg.jpg" alt="Gallery Image" height="238" width="238" /></div>
<div id="ps1" class="popit1" #hard coded popit id>
<section>
<span>IMAGE TITLE</span>
<span id="zoom"></span>
</section>
</div>
</div>
<div class="master">
<div id="imgprop"><img src="IMGCOMP/bgg.jpg" alt="Gallery Image" height="238" width="238" /></div>
<div id="ps1" class="popit2" #hard coded popit id>
<section>
<span>IMAGE TITLE</span>
<span id="zoom"></span>
</section>
</div>
</div>
Popup div:
<div id="GbgPopup1" #hard coded gbpopup id>
<div id="GPopupcontent">
<div class="closeit"></div>
<span class="ecs_tooltip_">Press esc to close <span class="arrow"></span></span>
<div class="image">
<img src="IMGCOMP/bgggg.jpg" alt="Gallery Image" height="400" width="430" />
</div>
</div>
</div>
<div id="GbgPopup2" #hard coded gbpopup id>
<div id="GPopupcontent">
<div class="closeit"></div>
<span class="ecs_tooltip_">Press esc to close <span class="arrow"></span></span>
<div class="image">
<img src="IMGCOMP/bgg.jpg" alt="Gallery Image" height="400" width="430" />
</div>
</div>
</div>
My jQuery code:
jQuery(function($) {
#hard coded
$(".popit1").click(function() {
setTimeout(function(){ // then show popup, deley in .5 second
loadPopup1(); // function show popup
}); // .5 second
return false;
});
$(".popit2").click(function() {
setTimeout(function(){ // then show popup, deley in .5 second
loadPopup2(); // function show popup
}); // .5 second
return false;
});
/* event for close the popup */
$("div.closeit").hover(
function() {
$('span.ecs_tooltip_').show();
},
function () {
$('span.ecs_tooltip_').hide();
}
);
$("div.closeit").click(function() {
disablePopup(); // function close pop up
});
$(this).keyup(function(event) {
if (event.which == 27) { // 27 is 'Ecs' in the keyboard
disablePopup(); // function close pop up
}
});
var popupStatus = 0; // set value
#hard coded
function loadPopup1() {
if(popupStatus == 0) { // if value is 0, show popup
$("#GbgPopup1").fadeIn(0500); // fadein popup div
popupStatus = 1; // and set value to 1
}
}
function loadPopup2() {
if(popupStatus == 0) { // if value is 0, show popup
$("#GbgPopup2").fadeIn(0500); // fadein popup div
popupStatus = 1; // and set value to 1
}
}
#hard coded
function disablePopup() {
if(popupStatus == 1) { // if value is 1, close popup
$("#GbgPopup1").fadeOut("normal");
$("#GbgPopup2").fadeOut("normal");
popupStatus = 0; // and set value to 0
}
}
});
Every help and more jQuery resources to help improve my knowledge is welcomed
I hope I understand your question right. Do you want to know how to take the picture source from master and put it into the popup?
To get the src of the picture in master you can do this:
$(".popit").click(function() {
setTimeout(function(){ // then show popup, deley in .5 second
loadPopup(this); // function show popup
}); // .5 second
return false;
});
function loadPopup(clickedElement) {
if(popupStatus == 0) { // if value is 0, show popup
// first find the img tag from master
var imgSrc = $(clickedElement).parent().find("img").attr("src");
var popup = $("#GbgPopup");
popup.find("img").attr("src", imgSrc);
popup.fadeIn(0500); // fadein popup div
popupStatus = 1; // and set value to 1
}
}
I'm sorry if there are bugs in the code, I did not run it. I trust you can remove the hard coded part from your code again.
create a master div and use http://api.jquery.com/appendto/ to dinamically generate every popup passing only the image and the counter
ie:
function generatePop(image, counter) {
var html = '<div class="ecs_tooltip_" id="pop"'+counter+"><img src=... </div>';
$(html).appendTo('#master-div');
}
After seeing Martin's answer, I was able to dig more into jQuery and adapt his answer to make it work.
All I did was move the code in loadpopup() function into the parent .click() function, change the $(".popit").click for the div(master) to $(".master").click to effectively select the whole div, used the $(this) so I can get the current clicked img in the master div and then replaced the src in the popup div
var popupStatus = 0; // set value
$(".master").click(function() {
var imgSrc = $(this).find('img').attr('src');
var popup = $("#GbgPopup");
popup.find("img").attr("src", imgSrc);
popup.fadeIn(0500); // fadein popup div
popupStatus = 1; // and set value to 1
//return false;
});
Trying to figure this out. I am inexperienced at jQuery, and not understanding how to loop through elements and match one.
I have 3 divs:
<div class="first-image">
<img src="images/first.png">
</div>
<div class="second-image">
<img src="images/second.png">
</div>
<div class="third-image">
<img src="images/third.png">
</div>
And off to the side, links in a div named 'copy' with rel = first-image, etc.:
...
Clicking the link will fade up the image in the associated div (using GSAP TweenMax)
Here is the function I've been working on to do this... but I am not fully understanding how to loop through all the "rel" elements, and make a match to the one that has been clicked on.
<script>
//pause slideshow on members to ledger when text is clicked, and show associated image
$(function() {
$('.copy').on('click','a',function(e) {
e.preventDefault();
var slideName = $(this).attr('rel');
$("rel").each(function(i){
if (this.rel == slideName) {
console.log(this);
}
});
//var change_screens_tween = TweenMax.to('.'+slideName+'', 1, {
//autoAlpha:1
//});
});
});
</script>
What am I doing wrong? I don't even get an error in my browser. :-(
Thanks to the answer below, I got farther. Here is my revised code.
$('[rel]').each(function(k, v){
if (v == slideName) {
var change_screens_tween = TweenMax.to('.'+slideName+'', 1, {
autoAlpha:1
});
} else {
var change_screens_tween = TweenMax.to('.'+slideName+'', 1, {
autoAlpha:0
});
}
});
});
This is starting to work, but makes the screenshots appear and then instantly fade out. And it only works once. Any thoughts?
Add brackets around rel, like so:
$('[rel]').each(function() {
if ($(this).attr('rel') == slideName) {
console.log(this);
}
});
I'm trying to check if the content in #textd is not empty and that it contains more than 150 chars. If so, I send its content to another web page, if not I display an error message relative to the context. I'm doing this with these codes:
jsFiddle
HTML code:
<span>AFD</span>
<div class="ooo" hidden>
<h4 id="titled">FOPJG?</h4>
</div>
<div>
<p id="textd"></p>
</div>
<button id="submitd">Submit</button>
</div>
Javascript/jQuery code:
$("#r").click(function () {
$(".ooo").prop("hidden", false);
});
$("#submitd").click(function () {
if (!$("#textd").empty() && $("#textd").length() < 150) {
var str = $("#textd").text();
window.location.replace("foo?d="+str);
} else {
if (!$("#textd").empty() && $("#textd").length() > 150) {
$("#titled").html("FOPJG?<small style='color:red;'>not under 150 chars.</small>");
} else {
$("#titled").html("FOPJG?<small style='color:red;'>ABVQS.</small>");
}
}
});
The issue here, is that when I click on that submit button, the .ooo is not displayed. I've also another question, does this implementation work correctly relative to the above algorithm's description?
Couple things:
You should use style="display:none;" instead of the hiddenattribute. It's just more standard. Further, you should use an external style sheets instead for all of the styles, but that's another battle.
Your if/else logic is a bit faulty: .empty() removes everything from the element - it will not return true/false the way you're expecting. Use .text().length instead.
You will likely also want to use return false; (or e.preventDefault();) so the links don't go anywhere.
So, here goes:
HTML
<span>AFD</span>
<div class="ooo" style="display:none;">
<h4 id="titled">FOPJG?</h4>
</div>
<div>
<p id="textd">[ ... ]</p>
</div>
<button id="submitd">Submit</button>
jQuery
$("#r").click(function () {
$(".ooo").show();
return false;
});
$("#submitd").click(function () {
if ($("#textd").text().length == 0) {
$("#titled").html("FOPJG?<small style='color:red;'> It's Empty</small>");
} else if ($("#textd").text().length < 150) {
$("#titled").html("FOPJG?<small style='color:red;'> Length is under 150 chars.</small>");
} else if ($("#textd").text().length) {
$("#titled").html("FOPJG?<small style='color:red;'> Length is over or exactly 150 chars.</small>");
}
return false;
});
jsFiddle
You should use visibility: hidden instead of html hidden tag so you can change its property easily in js
Need help in animating a div up on click and down via the same click link. Here is my Javascript below:
$(function() {
// global functions
var dash = $('#Dashboard');
var dashBtn = $('#dashClick');
var state = dash.css({
"top":600
});
var clicked = dashBtn.click(function(e) {
e.preventDefault();
if(clicked) {
dash.animate({"top":0});
}
if(state > 0 && clicked) {
dash.animate({"top":600});
}
});
//make it height of document
dash.height($(document).height());
});
and my HtML below showing the references to the javascript with the ID's:
<a id="dashClick" href="#">Dashboard</a>
<div id="Dashboard">
<h2 class="dashTitle">Project Information</h2>
<div class="dashInnerAdd">
<p>
Project name: CSS3 Effects N' Stuff
My github is: https://github.com/Amechi101/css3effects
</p>
</div>
</div>
</main> <!-- end grid main-->
</div>
<!--end wrap -->
Among other things (see the code for all changes):
If you want to use top, you probably are wanting it to behave like it does with absolute positioning. To do that, you need a container with relative positioning around the #Dashboard. Also, your javascript animate needs px values. "top":600 should really be top:"600px".
html:
<a id="dashClick" href="#">Dashboard</a>
<div class="container">
<div id="Dashboard">
<h2 class="dashTitle">Project Information</h2>
<div class="dashInnerAdd">
<p>
Project name: CSS3 Effects N' Stuff
My github is: https://github.com/Amechi101/css3effects
</p>
</div>
</div>
</div>
js:
$(function() {
// global functions
var dash = $('#Dashboard');
var dashBtn = $('#dashClick');
var clicked = false;
dashBtn.click(function(e) {
e.preventDefault();
if(clicked === true) {
clicked = false;
dash.animate({top:"0px"});
} else {
clicked = true;
dash.animate({top:"600px"});
}
});
//make it height of document
dash.height($(document).height());
});
and some css:
.container {
position: relative;
}
#Dashboard {
position: absolute;
top: 0;
}
fiddle: http://jsfiddle.net/SQK78/2/
If you don't need the absolute positioning, you can just change top to marginTop, and you can get rid of the container wrapper as well as all of the css in that fiddle.
Your main javascript only executes once. You need to track state from within the click handler. Try this:
$(function() {
// global functions
var dash = $('#Dashboard');
var dashBtn = $('#dashClick');
var state = true;
dashBtn.click(function(e) {
state = !state;
e.preventDefault();
if(state) {
dash.animate({"top":20});
}
if(!state) {
dash.animate({"top":600});
}
});
//make it height of document
dash.height($(document).height());
});