I'm trying to make simple image gallery with html/css and a bit of javascript.It's all up and working, but one function.
I want that when I open the index.html 'All' would be already highlighted by my custom style and if pushed on another button highlight would go to that particular button.
html of a button looks like this
<input type='button' value='Design' class="cat-itiem" id='filterDesign'>
edit: I ended up using OnResolve's method and it worked just fine!(even for someone who doesn't know any JS) Thank you all for help :)
Assuming your highlighted class is called activeButton, you could do the following with jQuery
$(function () {
$(".cat-itemem").click(function () {
$(".cat-itemem").removeClass('activeButton');
$(this).addClass('activeButton');
}
})
I've created an example with jsfiddle for you with simple jQuery. You can see each aspect (markup, css, and jquery).
http://jsfiddle.net/p5ZUv/7/
You can certainly append styles on button click via pure css, but to unhighlight others you need javascript.
HTML:
<input type='button' value='All' class="cat-itiem highlighted" id='filterAll'>
<input type='button' value='Design' class="cat-itiem" id='filterDesign'>
<input type='button' value='Logo' class="cat-itiem" id='filterLogo'>
<input type='button' value='Photography' class="cat-itiem" id='filterPhotography'>
CSS (Add yours)
.cat-itiem{}
.highlighted{background:green}
JS (Jquery is used)
$('.cat-itiem').click(function(){$('.cat-itiem').removeClass('highlighted'); $(this).addClass('highlighted')}
Related
I have a a HTML page with a button which shoes hidden content when pressed. I am using jquery code which I have bundled into my HTML page. When I press the button to show the content in the hidden div it works find, however when I press the button again to hide the content nothing happens. If anyone could help me that would be great. Also how would I be able to target multiple buttons. Would I just paste the same jquery code and label it '2' and then '3' and so on for example? Any working examples would be great. Here is my code:
HTML:
<head>
<script>
$(document).ready(function() {
$("#spoiler1").hide();
$("#button1").click(function() {
$("#spoiler1").show(300);
});
});
</script>
</head>
<button id="button1">Adventurer ▼</button>
<div id="spoiler1" style="display:none">
<p>1. Climb a tree<input type="checkbox" /></p>
<p>2. Roll down a really big hill<input type="checkbox" ></p>
<p>3. Camp out in the wild<input type="checkbox" ></p>
<p>4. Build a den<input type="checkbox" ></p>
<p>5. Skim a stone<input type="checkbox" ></p>
</div>
Thanks in advance for any help or advice.
Use .toggle() instead
$(document).ready(function () {
$("#spoiler1").hide();
$("#button1").click(function () {
$("#spoiler1").toggle('slow');
});
});
Demo
Update
And the idea about having mutiple buttons, I've come up with the approach that you should try, use classes instead of IDs for the buttons and provide the same ID to divs that you want to toggle. This might take some design issues but you can manage and this is just a basic guideline to move forward.
As Markup is too long for mutiple divs so i'm posting only.
JQuery
$(document).ready(function () {
$(".category").click(function () {
$(".show").hide();
var divToShow = $(this).text().split(" ")[0];
$("#" + divToShow).toggle('slow');
});
});
Updated Fiddle
$(document).ready(function(){
$("#spoiler1").hide();
$("#button1").click(function(){
if($("#spoiler1").is(':visible')){
$("#spoiler1").slideUp(300);
}
else
{
$("#spoiler1").slideDown(300);
}
});
});
Demo:
http://jsfiddle.net/YvUDV/
Use toggle instead:
$('#button1').bind("click",function(){
$("#spoiler1").toggle("fast");
});
As for multiple button event. Assign a class name to the button so you can select by class.
$('button.toggle-div').click(function(){...});
As for visibility toggle, there are a number of ways.
Use toggle() in jQuery. (the most obvious choice, but in practice we could also..)
Use toggleClass() link to
add/remove a class which has a display:none css rule. (more flexible, you can toggle other css styles like the font color, background, etc.)
Use some
two-way binding JavaScript libraries like knockoutjs or angular.
(Probably an overkill for a small application. But it will
definitely reduce the amount of coding if it is a large scale.)
Still learning jQuery and will be thankful for any help.
I am currently using this jQuery Switchbutton https://github.com/olance/jQuery-switchButton
It uses a checkbox as an input type, and creates span tags with labels.
How would I say that I want on_label to have data-status="accept", and off_label data-status="decline"?
HTML:
<input type="checkbox" id="accept-offer"/>
JS:
$("input#accept-offer").switchButton({
on_label: "Accept",
off_label: "Ignore"
});
Thanks!!
You can try to do like this:
$('.switch-button-label.on').data('status','accept');
$('.switch-button-label.off').data('status','decline');
or:
$('.switch-button-label.on').attr('data-status','accept');
$('.switch-button-label.off').attr('data-status','decline');
I have a code for my site, when an image is clicked a pop up window displays which is working fine. However, whenever I roll over the first rollover works, but the original image before the rollover does not show anymore? why is this?
<input name="image" type="image" onMouseOver= src="http://japanesefriend.zxq.net/images/x11_title.gif" onMouseOut= src="http://japanesefriend.zxq.net/images/level4_nouns_08.gif'" value="Place Order" src="http://japanesefriend.zxq.net/images/level4_nouns_08.gif" onClick='styledPopupOpen("<img src=http://japanesefriend.zxq.net/flashcards/go.gif />")' align=middle width=164 height=154>
Use CSS sprites for rollovers.
Your HTML is invalid.
This...
onMouseOver= src="http://japanesefriend.zxq.net/images/x11_title.gif"
should be this...
onMouseOver="this.src='http://japanesefriend.zxq.net/images/x11_title.gif'"
Same for the onMouseOut...
onMouseOut="this.src='http://japanesefriend.zxq.net/images/level4_nouns_08.gif'"
DEMO: http://jsfiddle.net/XBLfN/
Or you can eliminate this. and just do src='http://...
onMouseOver="src='http://japanesefriend.zxq.net/images/x11_title.gif'"
onMouseOut="src='http://japanesefriend.zxq.net/images/level4_nouns_08.gif'"
DEMO: http://jsfiddle.net/XBLfN/1/
see: rollover image with buttons
this seems to be a duplicate - the solution in the above question shoudl work for you.
For chrome (and even for other browsers), it is always a good idea to validate your html:
http://validator.w3.org/
Has anyone seen this behavior:
I have a couple of HTML buttons used to drive a content rotator:
<div id="rotatorControls" class="rotatorControls" runat="server">
<input name="previous" id="previous" type="button" value="«" />
<input name="next" id="next" type="button" value="»" />
</div>
The buttons are activated with a little jQuery:
$(document).ready(function() {
mcarousel = $("#carouseldiv").msCarousel({ boxClass: 'div.box', height: 100, width: 450 }).data("msCarousel");
//add click event
$("#next").click(function() {
//calling next method
mcarousel.next();
});
$("#previous").click(function() {
//calling previous method
mcarousel.previous();
});
})
In IE this works fine...in Chrome and FireFox 10, the buttons aren't clickable. When I roll my cursor over the buttons, the cursor doesn't change and the buttons don't highlight like other buttons do.
Anyone seen this before and/or have any ideas how to fix this? I've already tried setting the z-index on the buttons, and moving them out of the container div (thinking an invisible element is blocking the click), but neither of those worked.
Any help would be appreciated.
EDIT
I'm using the mCarousel plugin provided by Marghoob Suleman (http://www.marghoobsuleman.com/jquery-ms-carousel)
At a guess without the full code, I would suggest checking the relevant js files have loaded correctly for this plugin in Firefox and Chrome. Also it would be worth noting in the question that it is via a plugin not standard jQuery that this functionality is from.
Maybe you're missing something from the original implementation:
http://www.marghoobsuleman.com/mywork/jcomponents/carousel/index.html
For example the boxClass: 'div.box' pointing to the wrong place.
I had this same problem yesterday with a late version of Firefox and I found help on this site from Mikey G.
This may help if you want to go this route, it worked for me on a similiar issue, also with a slideshow.
Place your functions inside the buttons:
<input name="next" id="next" type="button" onclick="$mcarousel.next();" value="»" />
Forgive me if I left out a character or two, still pretty new.
It doesn't seem to be z-index, I've found info that suggests sometimes Firefox has problems with '.click()'
I am trying out the dialog from jquery UI. All the online demos use flora.css.
I can't get the dialog to display correctly with the css file generated by the themeroller application.
Am I missing something? Should these things work out of the box?
Update: Thanks Brock. When I cleaned up my code to make a sample, I realized that the HTML in demo.html (that comes with the themeroller.zip) is a little too verbose.
All I needed to do was give the dialog div the attribute class="ui-dialog" like this:
<div id="SERVICE03_DLG" class="ui-dialog">please enter something<br><br>
<label for="something">somthing:</label> <input name="something" id="something" type="text" maxlength="20" size="24">
</div>
I'll accept your answer. Thanks for your time.
I think it is because you have the classes different.
<div id="SERVICE03_DLG" class="flora"> (flora)
<div id="SERVICE03_DLG" class="ui-dialog"> (custom)
Even with the flora theme, you would still use the ui-dialog class to define it as a dialog.
I've done modals before and I've never even defined a class in the tag. jQueryUI should take care of that for you.
Try getting rid of the class attribute or using the ui-dialog class.