I want a background image of a tick to appear in each coloured box in my attached image onclick. When another coloured box is clicked I want the image to show in that one and then hidden in the previous one clicked. There should be no ticks shown on page load.I'm clueless as to how to do this.Here's my code for the image attached:
<div class="colour-picker">
<div class="tick-off" id="red" onclick="changeclass();">
</div>
[code]....
Alright, me having a very basic knowledge of js I'm looking for some help with(what I think should be) a simple hide/show of a set of divs. I've broken down the ccs/html I'm looking at on a test page here...
The js I have in the page had been what I tried to modify from a simple hide/show, but it's not doing what I want it to do (obviously). The goal is when you click on link 3, I want white3 to hide and all the other white divs to show, when you click on link 3, white 2 will hide and the other white divs will show, and so on. So basically it's revealing what div you click to. A lot of what I've found have been just toggles, but I'm not very confident in my ability to adjust code.
I'm new to the forums, so if i post anything wrong let me know. I'm trying to use links to hide all the images, and show just ones from a certain category. I've used the img name attribute to group them and tried to do a function that shows only one img.
<script language="javascript">
function showone(x) {
document.getElementByName('a').style.display='none';
document.getElementByName('b').style.display='none';
document.getElementByName('c').style.display='none';
[Code]...
except the links don't work like they should, and I can't figure out why. I'm an idiot with javascript, so if feel free to make fun of me, and if anyone knows how to get this simple function to work,
i have php code that shows a list of colored boxes and when you click one it changes the color of a div... this works fine as i have used a changecss function... i have these colors in a database with their values and specific color names... what i am trying to do is when a color is clicked it will change the div and also print the color name....i have made a php loop to print all the color names and i have the display as none... how can i add to the onclick function that changes the color to also put the display of the certain color name to "block" and then if you select another color it hides that one and shows the new color.
View 8 Replies View RelatedIm trying to hide a div ( quick reply box) like IPB using this code it's hidden but the actual link to toggle it isn't a live link for some reason any idea's what im doing wrong would be good.
This is what i am trying to hide
Im not sure how i get this to toggle to show/ re hide the div.
<div id="myClickyDiv" onclick="swapMyToggledDiv();">Toggle</div>
I have a page where an alternate address area is kept hidden via JavaScript and CSS divs. If you click that you want to use an alternate billing address, two divs are expanded. One with the form fields for entering in your alternate address, the other area has further info about why we need that alternate address. (Code is below). This works PERFECTLY for my needs....however, if you reload the page, the "show" button remains selected and OFF=ON and ON=OFF if you get my meaning...so when you click the radio that should be hiding the divs, it shows them and vice versa. Additionally if there is an error in the form and the page reloads to display the error, only the billing address area stays expanded (its inside the <form> tags), the text area next to it goes back to being hidden, and the show/hide OnClick no longer works. Ideally, I'd like the two to maintain the same state (i.e. if both we're shown, both stay shown).
CODE (trimmed down of course):
Code:
<head>
<style type="text/css" media="all">
.invis { visibility: hidden; display: none; }
.vis { visibility: visible; display: inline; }
</style>
<script language="javascript" type="text/javascript">
var c = 'invis';
var ids = new Array('id1', 'id2'); // IDs of your <div>s
function doSwap() {
c == 'vis' ? c = 'invis' : c = 'vis';
for (var i=0; i<ids.length; i++) {
document.getElementById(ids[i]).className = c;
}}
</script>
</head>
<body>
<div id="id1" class="invis">This is all just plain text that appears when the NO radio is clicked but disappears on reload</div>
<form>
<table>
<tr>
<td>
<input type="Radio" name=" " value="hide" onClick="doSwap()" id=""> YES
<input type="Radio" name=" " value="show" onClick="doSwap()" id=""> NO
</td>
</tr>
<tr id="id2" class="invis">
<td>extra address entry stuff that appears when the NO radio and that stays on page after reload</td>
</tr>
</table>
</body>
I have a php page that essentially builds a pay report in the form of a table. The php side builds the page properly, though it took some time to get the table rows onmouseover and onmouseout functions to work for row highlighting. Now the issue is the table row's onclick function.
Here is what the outputed html looks like.
<head><script type="text/javascript" language="javascript">
function HideShowDiv(divID){
if (document.getElementById(divID).style.display == "none"){
document.getElementById(divID).style.display = "block");
document.writeln("show "+divID);
}else{
document.getElementById(divID).style.display = "none";
document.writeln("hide "+divID);
}} .....
<tr>
<td colspan="2" align="right">Some Association of Baseball</td>
<td align="right">$24</td>
<td align="center"></td>
</tr>
</table>
</div> <!-- Closes the main body div container -->
In my javascript function, the writeln() calls are for testing to see if the even is even firing. but nothing gets written to the page. Basically I want the row with the users name to be clickable which will show the details in the hidden div associated with the user.
I have a table that contains many rows, some in italian with code <td nome='riga_i'> and some in english with code <td name='row_e'>. I have created two buttons with different background flags: italy and uk, so when one pushes the button with flag uk, the html page will be reloaded with only english rows, and when one pushes the button with flag it, the same page is reloaded containing only italian rows. All the code posted here works well, but I think that the code can be better because to reach this result I had to dupplicate the same function and I don' t like this.
Here the code:
To better the code I have tried in this way but without success ...
I am trying to create a Link that changes its currently displayed text and also toggles the css.display property from inline to hidden. I'm sure there are solution outs there btu I have not been able to find one that does both functions with one click properly and is also easy to implement for people not as familiar with html and javascript. Obviously I am trying to create a show more, show less type link. currently this often shared code works fine to change the current state of the target ID's css.display from none to inline. My end goal is to be able to not only toggle the display of the LONG1 div but to also change the innerhtml of 'short1' from "Show More" to "Show Less".I am still learning about JS so Im really rough around the edges. I tried some different techniques btu I dont ahev them posted on my work pc.
View 14 Replies View RelatedI have created a user form in which visitors can fill in sections, some of which are hidden or displayed using the onclick to trigger a DIV to display or hide then submit the results to a database using ASP. All works fine with that, however... I have created another page which retrieves the results for an individual's form submission, and I want to hide the sections that were not completed (hidden when submitted). How can I get my page to hide or show DIVs, depending on the value retrieved from a particular field within the database? i.e. if Question1Response="A", show Div ID="A Section" If Question1Response="B", show Div ID="B Section" etc.
View 4 Replies View RelatedI have a set of divs on my portfolio page that all share the common class 'module', with an additional class that determines the background image.I currently have this function that I thought would keep each instance of .module hidden until it had loaded:
$('.module').ready(function(){
$('.module').fadeIn('9000');
});
I'm not certain but I think the 'ready' only refers to the HTML content and ignores the fact that the background image (defined in css) isn't ready.Is there any simple way I can make each div stay hidden until the background is loaded, then perform show() or fadeIn()???
The page in question can be found at http:[url]....
I want to hide/show table rows with an onclick event. Here are the relevant snippets of code I have:
Script:
$(document).ready(function() {
$("#plan1-title").click(function() {
$("#plan1").toggle();
[code]....
It works in all browsers (Firefox, Safari, Chrome, and Opera), however not a single version of IE 6-8 will toggle the table row.
[URL].. There is currently a hidden div called fullsize in the content which i have hidden by putting display:none in the css on that div. But I need to get that div to display when a user clicks on a thumbnail from the horizontal scrolling gallery.
I have been trying to get it to work for about 3 hours but can't see what it is.
I have an image code...
I want to be able to have this hidden as default then when i submit my page code...
I wonder if its possible to show and hide a image with javascipt. I want the image to disapear from bottom and up very smooth, maybe under 3-4sec. Is it possible ? any tips ?
View 6 Replies View RelatedI am trying to hide/show table when hide/show button is pressed
Problem: The code works fine when I remove 'slow' from line 10. But with 'slow' in line 10 content of toggleButton doesnt change from Hide to Show when pressed.
Code:
The ones I find on Google all consist of white backgrounds that fade out to reveal an image... What I have at the moment are thumbnails that have hide/show div behaviors... But they look really boring at the moment and make my site boring... How I could make a png (a thumbnail border) fade in on the thumbnail whenever the mouse goes over it...
View 2 Replies View RelatedI'm not quite sure what this is called (tooltip, dialogue, popup, show/hide) but I've seen it around... I'd like to accomplish the following, as indicated in the attached image.
I want an image to automatically appear upon a user's visit 'pointing' to a specific link on my nav bar.
Ideally, this will load on users visit, then not load if/when they click the [x]...
[URL]
I have a list of checkboxes. Want to show or hide images related to each checkbox upon selection/deselection.
I want initially the images will not shown as the check boxes are select the images will showup. if deselect any checkbox then that particular image will disappear with taking no space.
Bellow is the code witch not working.
Code:
<html>
<head>
<script type="text/javascript">
$(document).ready(function () {
[Code].....
the bellow scenario: I have a list of checkboxes. Want to show or hide images related to each checkbox upon selection/deselection. I want initially the images will not shown as the check boxes are select the images will showup. if deselect any checkbox then that particular image will disappear with taking no space.
[Code]...
I have a list of checkboxes. Want to show or hide images related to each checkbox upon selection/deselection.
I want initially the images will not shown as the check boxes are select the images will showup. if deselect any checkbox then that particular image will disappear with taking no space.[code]...
I opted to use JavaScript & PHP (instead of Flash) to create a sort-of "t-shirt designer" -- basically, it's a gallery-type script that allows users to scroll through t-shirt styles, swap colors, and so on, prior to reaching the actual design tool. And I'm starting to regret.
It's actually working very well so far, except for one thing: I want the t-shirt option that the user selects to link the user to the design tool. The "gallery" already has an image for each possible option that displays whenever the user selects a combination, but I want to make that image is a clickable link.
I have no idea where to start -- I know next to nothing about javascript -- and to accomplish this in Flasjh I'd have to start this stupid basic thing all over again from scratch, and it would defeat the point of not using Flash in the first place, so
I have a webpage with a left navigation bar and a content box with thumbnails in. I would like to be able to click one image and have all the thumbnails hide and show the larger version of the image in their place.
View 4 Replies View RelatedFor simplicity and debugging, I attempt to display an apple when the mouse passes over the center of an image.In IE, the mouseover hand shows as the mouse passes over the center of the image and the apple is displayed.In FF, the mouseover hand shows as the mouse passes over the center of the image but the apple does not display.(By the way, I'm certain the showhide function is fine,
<div id="Core" style="position:absolute; width:209px; height:115px; z-index:4; top:212px; left:28px; visibility: hidden"><font color="#000000"><img src="apple.jpg" width="125" height="140"></font></div>[code]....
I am using jquery with the cookie plugin and I have multiple image buttons that can hide/show multiple elements. My question is how can I add a cookie to this code to remember whether each separate element is opened or closed?
The code,
$(document).ready(function() {
// choose text for the show/hide link - can contain HTML (e.g. an image)
var showText='<div class="expanddown"></div>';
var hideText='<div class="expandup"></div>';
// initialise the visibility check
var is_visible = false;
// append show/hide links to the element directly preceding the element with a class of "toggle"
$('.toggle').prev().append('<a href="#" class="togglelink">'+hideText+'</a>');
// capture clicks on the toggle links
$('a.togglelink').click(function() {
// switch visibility
is_visible = !is_visible;
// change the link depending on whether the element is shown or hidden
$(this).html( (!is_visible) ? hideText : showText);
// toggle the display - uncomment the next line for a basic "accordion" style
//$('.toggle').hide();$('a.toggleLink').html(showText);
$(this).parent().next('.toggle').slideToggle('fast');
// return false so any link destination is not followed
return false;
});
});
HTML,
<a class="togglelink" href="#"></a>
<div class="toggle">
Content
</div>
im trying to hide a div on page load,ive used this.
<script type="text/javascript">
function hideDiv(){
document.getElementById('sidebar').style.display = "none";[code].....
and this in the body tag
<body onload="javascript:hideDiv()">
it works fine hiding the div named sidebar, problem comes when i try to then use an Onclick event to show the hidden div, it just wont show.can this be done?