JS Fiddle (code)
This is more of a task I have set myself to learn Arrays but now I was wondering if any of you can think of a better cleaner way of doing this task. I simply want a list of projects which highlight when the user hovers over some links..
What I want to do
I have a list of projects, on each project I could have worked on the SEO, Develpment or Design. On the page there is also a list of links say: Design, Development and SEO. When hovering over a link I want some of the projects to highlight..(combinations). So some projects I might of done more then one task on will highlight for more then one link.....
How I currently tried to do this
I thought that I could make a 2d array with a list of on offs for the projects. Depending on what link you hovered over pulls out the correct array, if you see the JSfiddle link, that is as far as I could go.
An Example of something very similar
ID Design
Thank You for anyhelp or advice
I hope I explained that clearly, I know I could rip the code off for the example link, but I rather learn from doing then just cut and paste.. - see what others think and use jquery.
You can use 3 different styles for each project , let say : ".design", ".seo", ".development"
$("#link1").hover(
function ()
{
$(".design").each(function()
{
$(this).toggleClass("highlight");
});
},
function ()
{
$(".design").each(function()
{
$(this).toggleClass("highlight");
});
}
);
Explanation:
When mouse is hovered over link1 a class .highlight is toggled (added when mouseover,removed when mouseout) on elements that use .design class. You can do similar way to others 2 classes.
Related
Im very new to this and have reviewed other posts similar to this question. However, I'm finding that those solutions don't work for me.
Background: I'm working in Wix's Velo platform for Javascript. (forgive me if that's not the right technical terminology here)
My goal: When my website home page loads, I want one of the text boxes on the page (#text45) to NOT be visible until 5 seconds have passed. Then, when box #text45 is visible, I want another plain box (#box2) to turn to hidden.
I have found some examples like the one below: (not all code has been pasted and I realize some elements like div1 would need to change to my specific element names)
document.getElementById("div1").style.visibility = "visible";
}
setTimeout("showIt()", 5000);
However, I get an error code: Cannot find name 'document'. Do you need to change your target library? Try changing the 'lib' compiler option to include 'dom'.
When researching this, I found out that Velo cannot access the dom and elements can only be accessed via "$w".
Would someone be kind enough to set me in the right direction on how to accomplish the "goal" above? I would really appreciate it! Thank you in advance.
Here's how you would do it. Note, that it's good practice to change the IDs of your elements to more descriptive names, but I've stuck with the names you provided in your question.
Start by setting #text45 to hidden in using the Properties & Events panel.
Then use this code (note that your page might already have an onReady. If it's there an you're not using it yet, delete all the code on the page and replace it with this):
$w.onReady( () => {
setTimeout(() => {
$w('#text45').show();
$w('#box2').hide();
}, 5000)
} );
I am trying to create a webpage. The three top menu buttons open each new submenus. In the submenus I have buttons that need to open one div and close the others.
I have kind of successfully figured how to do that but the way I implemented it is very inefficient and I want to make it better. I found this http://jsfiddle.net/n53qg/ from stackoverflow which is pretty much what I want to do but for some reason can't get it to work. Even if I straight out copy paste all the HTML, CSS and JS to their respective files, linked the css and js + jquery to the HTML, it doesn't work. I'm baffled.
This is the way I implemented this: http://jsfiddle.net/mk92jtgz/6/ It takes a lot of work to add new divs so I need a way to close all the others in a simpler way.
EDIT: I'd like to understand why I can't get the copy-pasted code from jsfiddle to work in my own files. I would also respect some guidance on how to achieve what I have done in a more efficient way.
$("#button1").click(function() {
$("#menu2").fadeOut("slow", function() {
$("#menu3").fadeOut("slow", function() {
$("#menu1").fadeIn("slow");
});
});
$("#button1").css("background-color", "white");
$("#button3").css("background-color", "#f6c54e");
$("#button2").css("background-color", "#f6c54e");
currentDay();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I am fairly new to jQuery, but I feel like I have a pretty decent grasp on it. Or at least this part of it. I've been through quite a few tutorials on jQuery, but I've never run into this problem before.
I want to hover on an image and have it reveal a small paragraph beside it. I have written this jQuery that does exactly what I want it to do, except it only works once. Hovering over the image reveals the description paragraph, and moving outside the image hides it again, but then hovering won't do anything. Any ideas why this might be?
$(document).ready(function(){
$('#novelDescrip').hide();
$('#barDescrip').hide();
$('.novel').hover(function(){
$('#novelDescrip').fadeIn('slow', 1);
},
function(){$('#novelDescrip').hide();}
);
$('#barminder').hover(function(){
$('#barDescrip').fadeIn('slow', 1);
},
function(){$('#barDescrip').hide();
});
});
This should explain the use of toggle as well as the link Jorge posted.
How do I check if an element is hidden in jQuery?
Here are a few methods to get you started with the jQuery toggle function:
$('.click').click(function() {
$('.target').toggle();
});
$('.click').click(function() {
$('.target').slideToggle();
});
$('.click').click(function() {
$('.target').fadeToggle();
});
The slide and fade are used to give the toggle a slide or fade out effect.
You can also use the following attributes for different things:
$('element:hidden')
$('element:visible')
Or you can do the same with is:
$(element).is(":hidden")
$(element).is(":visible")
Answer to your question: since you didn't post your html I can't test anything for you, but I'd recommend following the tutorials stated above or changing hide() to show() at some parts of your code.
Hope that helps.
i want to implement a right side sliding menu similar to the one in amazon.com..
i am trying to use javascript to edit the script on every mouseover/onclick event..
i want to hide/show the table on every event.
function show(a){
var id="myMenu"+a
if (i<-12){
i=i+speed;
document.getElementById(id).style.left=i;
}
}
function hide(a){
var id="myMenu"+a
if (i>-135){
i=i-speed;
document.getElementById(id).style.left=i;
}
}
this should be good to show/hide the tables.. but how to id dynamically add two tables one over another..because the main menu table will always be visible, but the sub menu when hidden will be beneath the main menu..
any method to do the same?
am i in the right path?
Definitely on the right path, this is a good test of concept.
I would suggest you look at jQuery (or other JavaScript libraries like Scriptaculous) specifically at the slideToggle() and toggle() methods.
Don't want to give it all away, but take a look at the Amazon source code, you may get some helpful little tips. :P
I found an anchor plugin for jQuery, and its demo site is at http://www.position-relative.net/creation/anchor/.
I am developing a FAQ page on a website where a list of questions are followed by a list of answers. I could use the scroll effect to move down to the corresponding answer when a user click a question. But I also want the answer is highlighted in some ways or others so that a user can get focused on the answer.
I would like to achieve the effect. Also, if you know any other plugin to do this, please let me know.
As you invoke the anchor plugin using:
$(document).ready(function() {
$("a.anchorLink").anchorAnimate()
});
you could also bind your own function that does the highlighting as so:
$(document).ready(function() {
$("a.anchorLink").anchorAnimate().click(function() {
$('.highlight').removeClass('highlight');
$('a[name='+$(this).attr('href').substring(1)+']').next().addClass('highlight');
});
});
This requires that you have this kind of structure:
Anchor link
...
<a name="foobar"></a>
<div>The content you want to highlight</div>
And in CSS, you just define how you want the highlighted part to look like:
.highlight {
background: #ffc;
}
The jQuery code works so that when you click an anchor link, it first removes current highlights and then applies the highlight class to the element immediately after the link target.
You could expand this functionality by doing some kind of color fade animation like here in SO, but this should get you started.
I'd use jquery.scrollTo personally, to highlight it is pretty simple, just use .toggleclass() on the span/div that wraps the answer.