Best way to make toggle effect on column [closed] - javascript

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 9 years ago.
Improve this question
I have four columns that I want to toggle on hover.
Each column will have default content (visible when the page loads)
and content that will only show when the mouse hovers over the column.
I want the on-hover content to show with a smooth toggle effect (sliding down)
Just to make sure we're on the right track, I don't need to know how to do this.
I know how, what I need to know is the "best" way to do this.

You will have to work with the "onmouseover" and "onmouseout" events.
JavaScript:
document.getElementById('IDOfTheElement').onmouseover = function() {
// Whatever your hover code goes here
document.getElementById('IDOfElementYouWantToShow').style.display = "block";
});
document.getElementById('IDOfTheElement').onmouseout = function() {
// Exit hover code goes here
document.getElementById('IDOfElementYouWantToHide').style.display = "none";
});
jQuery has a nice way of dealing with this:
$('#IDOfTheElement').on('mouseover', function() {
// Whatever your hover code goes here
$('#IDOfElementYouWantToShow').show();
// Or you can
$('#IDOfElementYouWantToShow').fadeIn("slow", function() {
alert('Fading in!');
});
});
$('#IDOfTheElement').on('mouseout', function() {
// Exit hover code goes here
$('#IDOfElementYouWantToHide').hide();
// Or you can
$('#IDOfElementYouWantToShow').fadeOut("slow", function() {
alert('Fading out!');
});
});
Note that some browsers may have issues with show() and hide(), so you may need to use document.getElementById('ID').style.display = 'block'; or document.getElementById('ID').style.display = 'none';.

According to the tag you picked for your question, following is a good solution that olny requires JQuery (no CSS is involved). It's actually pretty easy using the hover() and toggle() functions.
$('tbody.restricted').hide();
$('table').hover(function() {
$(this).find('tbody.restricted').slideToggle("slow");
});
There's a little more complex challenge that is introduced by your will to animate multiple rows as a block. A solution I find suitable for that purpose is to encapsulate (dynamically or not) the rows you want to animate as a whole within a tbody that will be displayed as a block with CSS.
tbody {
display:block;
}
N.B.I went that way because of the usage of a table (columns was mentionned), but you could always design this solution without using tables and only markups displayed as blocks (div by default). This wouldn't require the previous CSS alteration.
See this fully functional JSFiddle

Don't want to just copy some other code, i think this jsfiddle link would solve your problem nicely.
http://jsfiddle.net/NKC2j/2/
$("#menu").hover(function(){
$('.flyout').slideToggle();
});
For performance you would need to toggle a CSS class, otherwise you will need to traverse your DOM a few times to show/hide elements
This is the original post: https://stackoverflow.com/a/11114735/1231079

Related

How to .toggle an Image randomly without having to .click [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I'm putting together a Loch Ness Monster website.
I have two images of Nessie that I've been trying to slide onto the screen from the left and right side at random intervals without having to be prompted by the user.
In details, the images are supposed to:
slide on the screen from the left hand side, then slide off, and then
slide on from the right hand side, then slide off.
both on random intervals.
I realize I need to probably be using the .animate function, math.random, and possibly .toggle but I'm very new to JavaScript and jQuery and have no idea how to piece the code together.
If anyone could help me I'd be extremely thankful !
$(function() {
});
function animateNessie() {
var randomTime = // use Math.random to update randomTime var for its next use
setTimeout(function() { // animate Nessie graphic (see jQuery.animate)
$().animate({
left: '50px'
});
//hide Nessie graphic
//call function again
animateNessie();
}, randomTime);
}
(Someone in my class tried to put together a loose outline, but they weren't really sure either.
I'd rather not use bootstrap because of having to go through the process of downloading it,
plus I'm not really good with it yet)
What you're thinking of is a carousel. It's easier to use Bootstrap for this, but I do know of a natural jQuery solution. I thought this might be helpful.
You'll want to use setInterval but pass in random values for this. Let's say for example, you wanted the intervals to randomly be between 1 and 10 seconds.
var randomTime = Math.floor(Math.random() * 9000) + 1000;
This will select a random number between 1000 and 10000, which will be passed into the second parameter of setInterval. This measures the number of miliseconds it will take for your code to run.
You then need to get your images. Assuming you only have two images, you would use this code.
var image1 = $("img:eq(0)"); // Selects your first image
var image2 = $("img:eq(1)"); // Selects your second image
Hide the second image with the hide() method.
image2.hide();
To run a function continuously, we use setInterval. Since we want to alternate, we just call the toggle() method which checks if an image is hidden or not.
setInterval(function() {
$("img").toggle();
}, randomTime);
Here's a fiddle
http://jsfiddle.net/sx3fnpuy/1/

'toggleClass' not working on every other div [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
For some strange reason this simple click function I've added, which should be adding the 'big' class to the clicked divs, is only working for every other div.
See an example here (click the square boxes with images)
$('.box').click(function(){
$(this).toggleClass('big').siblings().removeClass('big');
});
Here is a fiddle but I chose not to post this as it works fine as it should do. The error is caused by some other element but I don't know what
http://jsfiddle.net/Ly1bxswq/1/
You binding your click handler within a loop, but need to do it only once when all elements added to page.
$.each(data.feed.entry, function (i, entry) {
// ...
$container.append(item);
// ...
})
$('.box').click(function(){
$(this).toggleClass('big').siblings().removeClass('big');
}
As pointed out by #Yan Brunet's comment, it would be much better to delegate the event from every .box to their parent. That way you can bind your handler at any point (even before .box elements are added to page)
$container.on("click", ".box", function(){
$(this).toggleClass('big').siblings().removeClass('big');
});

How can I apply a style to element if the user came to website using a link with an anchor/hash [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
Let’s say I’ve put, somewhere on the internet, a link to my website. To be specific, it was a URL with an anchor/hash linking to a part of an article, like this: http://example.com/article/#subsection.
Now, if someone came through this link to my website, how can I trigger CSS/JS to make some action?
In my particular case, I want to add a style to the <div> with an id of subsection when someone uses the link containing #subsection.
Any ideas?
Given IE9 and later, this is possible entirely through the :target pseudo-class:
#subsection:target {
…
}
If what you're trying to do is to highlight a section on your page that matches the hash value in the current URL (which isn't entirely clear from the wording in your question) and you want to support a wide range of older browsers, then you can do something like this:
The hash value is not sent to the server so you would have to apply a change in client-side javascript. You can do that by adding a class to the object that matches the hash name when your page loads:
<script>
var id = window.location.hash.slice(1);
if (id) {
var obj = document.getElementById(id);
if (obj) {
obj.className += " specialStyle";
}
}
</script>
Or, using jQuery:
<script>
if (window.location.hash.length > 1) {
$(window.location.hash).addClass("specialStyle");
}
</script>
These scripts must be located anywhere after the elements you wish to add the class to or protected from executing until the DOM is loaded using something like $(document).ready(), though the sooner the script can run, the sooner the new style will show.
It's unclear to me whether the XSS vulnerability mentioned in the comments is still an issue in jQuery now or not, but you could either using the plain javascript version (which does not contain this vulnerability) or further protect against that in the jQuery version with something like this:
<script>
if (window.location.hash.length > 1) {
$(window.location.hash.replace(/[<>]/g, "")).addClass("specialStyle");
}
</script>

Linking two elements in jQuery [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
Is there a possibility of "linking" two CSS elements in jQuery?
An example from my project:
I'd like to append a .focused class to multiple elements at once when certain things happen. They all have the same prefix in their ID, but there is >1 of those prefixes (like #first-header - #first-button ; #second-header - #second-button and so on). It would probably use some regular expressions, but I can't seem to figure this stuff out.
A more accurate example, because I'm bad at explaining things:
When #first-header is .focused, append the same .focused class to #first-button as well. And that would need to work to any pair of -header and -button.
I hope I explained it well enough and am thankful for any kind of help.
You can easily select all items whose id starts with first- like this
$('[id^="first-"]').addClass('whatever');
It sounds like instead of using patterns in the ID of your HTML elements you should be using classes.
Example HTML:
<div id="first-button" class="button">...</div>
<div id="second-button" class="button">///</div>
Javascript:
$(".button").click(function(){ /*do stuff*/});
That Javascript would attach a click handler to all div elements with the class button.
$('[id$="header"]').on('focus blur', function(e) {
$('#' + this.id.split('-').shift() + '-button').toggleClass('focused', e.type=='focus');
});
FIDDLE
You cannot have multiple ids for one element. The proper way to do what you're doing is to give everything that you want to change a class like "toFocus"
Try this:
$("[name$='header']").focus(function(){
var t = $(this).attr("id").split("-")[0];
$("#"+t+"-button").addClass("focus");
});

Javascript Syntax error (Newbie) [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about programming within the scope defined in the help center.
Closed 8 years ago.
Improve this question
I have some code that I have been working on for some time. I had orginally tried to achive what i wanted using an array but this was overwhelming for me. I have scince attempted to modify my code to achive a conditional statment.
var settings = {
objSlideTrigger: '#one,#two,#three,#four,#five,#six'
} // link button id
if (objSlideTrigger: '#one') { // This is the line im getting a syntax error on.
objSlidePanel: '#content-one'
}
else if (objSlideTrigger: '#two') {
objSlidePanel: '#content-two'
}
else if (objSlideTrigger: '#three') {
objSlidePanel: '#content-three'
}
else if (objSlideTrigger: '#four') {
objSlidePanel: '#content-four'
}
else if (objSlideTrigger: '#five') {
objSlidePanel: '#content-five'
}
else if (objSlideTrigger: '#six') {
objSlidePanel: '#content-six'
};
};
That particular chunk of code is assigned the seetings for a function that slides a web element 'div' across the page using href links. the problem i had was that the href link would move all the six seperate divs at once.
My solution, though it may not be the best is to create six links that each handle their own divs. However the settings require the id's of both the links and the divs. I need the user to be able to decide what dive they want to see by clicking on the coresponding link.
As im fairly new to javascript the only ways that i knew i could possibly achieve such a thing was by either making two arrays one for the links and one for the divs. and when the user selected the link they want it would pull the href element from the array and insert it into the settings. Or alternativly have a bunch of conditional statments although a slightly more messy approach.
If anyone can help me solve this issue or find a better alternative to it, i would be very greatful. Thanks again in advance and i have included a js fiddle that shows the basics of the javasript code and what it does on page.
http://jsfiddle.net/BeU3U/6/
You are trying to set a value to objSlideTrigger in every if statement you must use == instead.
Try this considering objSlideTrigger is "#one" or "#two" etc.. and not all of them at the same time
if (settings.objSlideTrigger == '#one')
// ^^^^^^^^ ^^ not :
Change on all else if aswell to ==

Categories

Resources