Really need some JQuery help here. I'm about to launch my laptop out the window. I have come a long way with this piece of code an I think I am almost there but I am stuck on the last hurdle.
I am only going to include the pertinent pieces of code here because it is a very large piece.
I have a navigation menu for a mock solar system. Here is the link to the larger external piece if you want to see the whole thing. http://jsbin.com/zagiko/1/edit (please note this uses mostly CSS3).
I have a nav menu for the piece and when you click on the values in the nav menu the current script assigns a class of active. That all works perfectly. I built in a button to test the active state on click and the state changes are working. But I need it to respond to the state change on hover. I am not a JQuery person; I am learning. It almost seems like the hover isn't working because it is responding to the data loaded when the page loads instead of responding in real time. But I am just guessing.
What I need is an if statement that will respond to the live data (not on page load or when the document is ready). The if statement should basically say if this div is active then this other div can appear on hover. But if this div is not active then it cannot appear.
The current if statement I wrote is
if($("a.active").is('.uranus')){
$('#uranus .infos').hover(
function () {
$("#descriptionsp").fadeIn("2000");
})
};
The current script that runs when the site loads that sets up the menus is:
$(window).load(function(){
var e=$("body"),
t=$("#universe"),
n=$("#solar-system"),
r=function() {
e.removeClass("view-2D opening").addClass("view-3D").delay(2e3).queue(function() {
$(this).removeClass("hide-UI").addClass("set-speed");
$(this).dequeue()})
},
i=function(e){
t.removeClass().addClass(e)
};
$("#toggle-data").click(function(t){
e.toggleClass("data-open data-close");
t.preventDefault()
});
$("#toggle-controls").click(function(t){
e.toggleClass("controls-open controls-close");
t.preventDefault()
});
$("#data a").click(function(e){
var t=$(this).attr("class");
n.removeClass().addClass(t);
$(this).parent().find("a").removeClass("active");
$(this).addClass("active");
e.preventDefault()
});
Really need you help. Thanks in advance!
Right now, your block of code is only being checked when the javascript is loaded. At this time, the .uranus element is probably not active, so nothing will happen.
First of all, you want to move this block inside of document ready, otherwise your elements such as .uranus might not even exist yet.
Your logic is very close, but you need to move the if statement inside of the hover function like this:
$('#uranus .infos').hover(
function () {
if($("a.active").is('.uranus')){
$("#descriptionsp").fadeIn("2000");
}
});
This way, every time you hover on #uranus .infos, it will only execute the code if the .uranus is also .active
Related
I've written a jQuery code that adds and removes css classes from the accordion based on some condition. It works fine the fist time it loads but when I click on any links on the page and go to another page from there, it doesn't work when I come back to the same page.
Is it jQuery or React?
Here's my jQuery code.
$(function(){
$(".accordion").on("click", ".accordion-header", function(e){
if(!$(this).hasClass("has-add-bg")){
$(".accordion-item").removeClass("add-bg");
$(".accordion-header").removeClass("has-add-bg");
$(this).addClass("has-add-bg");
$(this).parent().addClass("add-bg");
}else{
$(this).parent().removeClass("add-bg");
$(this).removeClass("has-add-bg");
$(".accordion-item").removeClass("add-bg");
}
})
})
I tried using state but the problem is I want to add or remove the class of only the accordion I've clicked on. Not sure how to achieve that result just with state so wrote jQuery.
Point
The code I have here is from my "operating system" I'm trying to create inside a browser by putting iframes in AppWindows with PHP code as the backend or the (main program process).
Now in every GUI system you have the ability to move windows, stack one on top of each others and such, but I'm not able to do efficiently in HTML using jQuery & jQuery-UI.
I'm using draggable() and some tricks I've found on StackOverflow to be able to bring the div AppWindow on top.
The problem
The code for bringing the **AppWindow** on top works fine but the problem is the iframe inside that window gets reset, because what this code is doing is that it stacks the current div as the first div above all the others inside the parent container.
If you notice the AppWindow 1 iframe blinks when you click on that window, I don't want that.
Code (jQuery)
$(function() {
// Don't know what I'm doing with iframe here...
$('.AppWindow iframe').click(function(){
$(this).parent().child.parent().append(this);
});
$('.AppWindow').click(function(){
$(this).parent().append($(this));
});
$('.AppWindow').draggable({handle:".DragHandle"});
});
Conclusion
If there is a way of preventing this from happening feel free to write an answer below. If you have a better way such as "JavaScript OS UI Framework" or something like that you're even more free to write below.I want something like **os.js** or **windows93.net** type of thing. All I need is a working taskbar, working window and a way to easily embed a PHP page inside that window that will mimic the work of the application.
I don't think it's possible. Take a look at here.
But
why do you reorder windows by change their positions in the dom in the first place? You could simply work with z-index. A basic example where you just set an active class of the targeted frame.
$(function() {
$('.AppWindow').draggable({
handle:".DragHandle",
drag: function(event, ui){
updateActiveWindow(event.target);
}
});
$('.AppWindow').on('click', function(){
updateActiveWindow(this);
});
function updateActiveWindow(el) {
$('.AppWindow').removeClass('active');
$(el).addClass('active');
}
});
with following css changes
.AppWindow.ui-draggable-dragging,
.AppWindow.active {
z-index: 1;
}
Edit: optimized the js a bit so that the window turns active once you start dragging.
On our Magento Website we have a mega-menu which appears when the mouse hovers over a parent li element in the menu.
However, if you hover over the menu immediately as the page loads, the mega menu does not appear properly.
It's much worse if the user has a poor internet connection.
After checking the chrome inspector I see this is because the class over is not added to the parent li. If you wait a second or two and move the mouse out & back over the parent li element the over class is added and the display css property of the mega menu is changed to block.
I've found the javascript adding the over class, it's part of the theme that we are using script.js.
// CODE OMMITED FOR BREVITY
jQuery(window).load(function() {
// CODE OMMITED FOR BREVITY
if(jQuery('#nav-wide').length){
jQuery('#nav-wide li.level-top').mouseenter(function(){
jQuery(this).addClass('over');
if(mobileDevice == true){
document.addEventListener('touchstart', wideMenuListener, false);
}
});
jQuery('#nav-wide li.level-top').mouseleave(function(){
jQuery(this).removeClass('over');
});
// CODE OMMITED FOR BREVITY
}
// CODE OMMITED FOR BREVITY
});
Any idea why this javascript would take so long to load? Or how I could improve it?
I think I've figured this out.
The theme is adding the over class within the jQuery(window).load(function(){}); which loads when everything on the page has loaded i.e. when all images, objects & frames have loaded. And we are using facebook widget (frame) on most pages.
The jQuery(document).ready(function(){}); function loads when just the HTML Document is ready, which would be much sooner, almost a second in our case.
So I simply moved theme's mouseover event listener within to the jQuery(document).ready() function
What I'm doing is loading different content into a div each button. The code I'm using to do so:
$(function(){
$('#galleries').hide().load("letters/index.php", function(){
$(this).slideDown(1);
$(this).slideUp(1);
$(this).hide();
$(this).slideDown(1500);/* or fadeIn() or any other effect*/
document.getElementById("data").style.display = 'none';
});
});
This is an example of one code. I got another 8 like this, but I'm loading into #galleries a different php page everytime.
My problem is, it takes ages to load the second page. For example, on my first click on any button, it takes a second to load everything, doesn't matter what content it has. But whenever I press on another button to load another page, I have to wait for about 3-5seconds, and when I'm waiting, it shows nothing, no div is being shown, just the background.
Is it possible to fix this? Or maybe, is it possible inserting an LOADING image or text to let the user know that it's loading? so while the page is being loaded, the user sees : "LOADING.." or some loading icon.
This should get you going in the right direction.
Also I don't know what's with all of the different effects you have on $(this) either.
$(function(){
$(".loading-image").show();
$('#galleries').hide().load("letters/index.php", function(){
$(this).slideDown(1);
$(this).slideUp(1);
$(this).hide();
$(this).slideDown(1500);/* or fadeIn() or any other effect*/
$("#data").hide(); //replacing your getElementById
$(".loading-image").hide();
});
});
I'm designing an HTML page which has one button. The user clicks the button and a simple jQuery script animates that div away, revealing lower page content. You can see it here.
I've noticed that it looks/works fine the first time, but if I refresh the page with the browser button, it doesn't fully reset. The initial container is only half on the page. If I enter the URL again and load the page, it resets as expected.
NOTE: This only happens if you scroll down a bit after clicking the initial button... which seems weird.
I had no idea that there was any difference between these two operations, but there clearly is. What is the difference and how can I fix this problem from happening?
Here's my jQuery code, in case it's relevant:
$(document).ready(function(){
var faqs = $("#FAQ");
$("#learnmore").click(
function(){
$("#home").animate({top:'-=1066px'},600);
$("#more").animate({top:'-=1066px'}, 600, function() {$("#background").hide();} );
$("body").css('overflow-y', 'scroll');
//$("#home").slideUp();
console.log("jquery loaded");
}
);
});
It happens because it is cached by the browser.
If you styles are regularly modiefied, then as easy fix is to attach a unique id on the end of the reference, like
<link href="style.css?time=168768234928" ..../>
What it does, it makes the browser think it is a new request everytime it loads.
It happens because browser trying to scroll to the same position, what was before page reload. To check it, try press button and don't scroll to bottom of page and then reload page.
Okey, the reason is clear.
Now we need solution. Try this:
#more {display:none}
in your css. And then use
$("#more").show().animate(...
in your $("#learnmore").click() function. I hope this will solve the problem.