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 ==
Related
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
So I have a 'form search' function script that I am trying to apply to items within a container. I have found this from a tutorial online that someone used to search members of teaching staff. only I am looking to apply this to my div classes:
$('.form-search').on('submit',function(){return false;});
$('.form-search .btn').on('click', function(e){
var query = $.trim($(this).prevAll('.search-query').val()).toLowerCase();
$('div.dress-container .bold').each(function(){
var $this = $(this);
if($this.text().toLowerCase().indexOf(query) === -1)
$this.closest('div.dress-container').fadeOut();
else $this.closest('div.dress-container').fadeIn();
});
});
Here is the jsfiddle - I was trying to pull the image and text using the JS and class but it would not work:
http://jsfiddle.net/lmac1/x6kv91qk/
Can anyone point me in the right direction? I was using this JQuery hide all divs except for the divs I search for
The problem is that your <div class="dress-container"> is currently wrapping all of your products, therefore you keep on hiding all of them once you use the searchbar.
I fixed your html markup here and removed the <div class="row"> so they line up nicely when you have filtered them:
http://jsfiddle.net/j7c4kdy3/3/
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>
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
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
Example is in the header
I've been trying to do something like the header of this portfolio for a while. Where you can get different remarks on the same line by clicking the arrow. It also doesn't refresh anything which is neat. I just dont know to how phrase the question. I finally found this example. Can anyone help me with the JS or jQuery code? Sorry if this has been answered before I've tried phrasing it so many different ways but can't seem to find the answer.
Easy mode! Here's a working demo on jsfiddle
Setup some html
<p>
I'm a <span id="remark">Panda</span> bear.
<button id="nextRemark">refresh</button>
<img src="http://i.imgur.com/cFadsAE.gif" id="spinner"/>
<p>
Write some JavaScript (with jQuery)
$(function(){
var remarks = ["Koala", "Kangaroo", "Circus", "Grizzly"],
spinner = $("#spinner"),
delay = 1000;
$("#nextRemark").click(function(event) {
var button = $(this);
// display spinner, hide button
spinner.show();
button.hide();
setTimeout(function() {
var r;
// display remark
if (r = remarks.pop()) {
$("#remark").text(r);
}
// no more remarks
else {
$("#remark").text("dead");
button.remove();
}
// hide spinner, show button
spinner.hide();
button.show();
}, delay);
event.preventDefault();
});
});
It doesn't have fancy animations or superfluous delays, but that's the gist of it.
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 9 years ago.
Improve this question
I've this function in my script :
$("#image4").click(function(){
if($(this).attr("src")=="http://XXX.jpg"){
$(this).attr("src","http://YYYY.jpg");
}else{
$(this).attr("src","http://XXX.jpg");
}
return false;});
HTML
<img src="http://XXX.jpg" id="image4"/>
I don't understand why when I click on my image, the if part doesn't works. I explain : If I use this code, nothing change. If I add and alert un my click function, I see the alert twice and see the image change twice to.
It seems, "if" doesn't works and apply "if" and "else" at each time
Someone can help me about that. I think it a basic feature, I don't understand why it doesn't works.
Thanks
("#image4").click(function(){
^^
you missed a bracket!
Working: http://jsfiddle.net/MAVyb/
The sysntax and everything on your code is right so it is definetly value problem. Problem may be src have leading or trailing space in it.
try alert like
alert("-"+$(this).attr("src")+"-")
and whether is there any space between -(hypen) and src value.
also try
alert(($(this).attr("src")=="http://XXX.jpg")), it should return true if the src is equal
Update: i can reproduce your problem -- you should have attached the event listener function for two times. check your original code. that is the problem. check your code. you can verify this by changing id to some other in jquery method and img tag