I havent used Javascript in a while and I have almost forgotten it all but I would like to be reminded how to show and hide html div boxs to display hidden content by clicking on a text or such.
In this case I would like to have a hidden box filled with login information while the ahref link will be the indicator to tell the loginbox to appear or disappear and by knowing this I could easily apply it to the register area.
I would like to know how to do this or a pop up box sort of thing.
This is what I have so far:
Could anyone help me with this now. I can't seem to get it work.
The toggle is
Login
Showing content
<div class="signup" style="display: none;">
<p> test </p>
</div>
Javascript is
function showStuff(signup) {
document.getElementById('signup').style.display = 'block';
}
Why won't this work
Looks like the issue with your code is that your div has a class as 'signup' not an id.
try:
<div id="signup" style="display: none;">
<p> test </p>
</div>
See this jsfiddle for a working example with an additional fix to how your function works.
http://jsfiddle.net/aUQ6B/
Original Answer:
See: javascript hide/show element
Code to make note of is the following:
document.getElementById('myid').style.display
Setting this to 'none' hides the element.
Setting it to 'block, 'inline' or whatever the original value was will show the element.
Related
on the following site: http://www.strategix.co.za/ on that page you will see the heading OUR SOLUTIONS with the 8 hover over boxes.
what I'm trying to do is to wrap a href around each box so that not only when you hover over does it display the right side div but you can click on the box which takes you to the relevant page.
so in the code:
<div class="left2">
<div class="box2">Microsoft Dynamics ERP</div>
</div>
I try say:
<div class="left2">
<div class="box2">Microsoft Dynamics ERP</div>
</div>
But the minute I save it in wordpress it removes the ahref. I also tried this:
<div class="left2">
<div class="box2"><div>Microsoft Dynamics ERP</div></div>
</div>
But that didnt save either. I just need each seperate whole box to have an href.
Will appreciate some help.
Thanks.
Try
<div class="left2">
<div class="box2" onclick="javascript:window.location.href='link';">Microsoft Dynamics ERP</div>
</div>
Using javascript is one way to apply a link to an entire div.
I have a generic piece of html code with form fields which I reuse in several places. When opened inside a bootstrap modal I would like the content to fill the entire modal, but when used elsewhere I don't want it to be as wide. I wanted to do this using ng-class, using code like this:
<div ng-class="modal ? 'col-sm-9' : ['col-sm-9 col-lg-5']">
content...
</div>
The problem is: how do I check if the code is inside a modal or not? Is there some function I can call or some variable to read? I would like to avoid populating all modal-controllers with some isModal() function.
I would recommend using CSS for this. The browser would then identify if the snip-it appears within an element defined as the modal and the correctly apply the style.
Assuming you are using LESS with your bootstrap implementation an example is below. But it should give you a general idea either way.
LESS CSS markup:
div.content {
.col-lg-5
}
modal {
div.content {
.col-sm-9;
}
}
HTML:
<div class="modal">
<h1>Heading</h1>
<div class="content">
content...
</div>
</div>
Give id= "mymodal" to the div.
Then in script create a click function and call this div by id :
$("#mymodal").show();
The modal shows with its content.
Just setup jQuery Toggle. Here's the function below. it works fine. Basically when you click 'Show More' it shows more content, and the word 'Show More' changes to 'Show Less'.
$('#toggle').toggle(
function() {
$('#content').slideDown();
$(this).html('Show less →');
},
function() {
$('#content').slideUp();
$(this).html('Show more →');
}
);
This is fine, my issue is having more than one on a page. For some reason when I copy and paste the same HTML multiple times to create more than one toggle content, the others don't work and only the first one does. Here's the HTML:
<div id="team-page">
Intro paragraph
<a id="toggle" href="#">Show more →</a>
<div id="content">
Content shown when toggled
</div>
</div>
So when I duplicate this multiple times, the rest don't work. There is the obvious get around by adding #toggle1 #toggle2 and duplicating and amending the jQuery - but what's the better way? Many thanks.
$('#toggle').toggle( ...
You just get the 1st element because you're using the ID selector. and id is unique .
You need to use a CLASS 'content' :
<div class="content">
</div>
and transform your code :
$('.toggle').toggle( ...
I have an html where I have bunch of text controlled by a show hide button, (say this code snippet is para). Now I would like to add additional layer of control on top of that. I would like to have a text box on top of the html page when it loads to have a option to hide or show para by default based on check uncheck of the text box.
Here is my code para
print $indexfd
qq~<div id="div_$var3">\n~, # Add a div around the $key-elements
qq~<input onclick="showit('$var3')" type="button" id="btn_show_$var3" value="showit">\n~,
qq~<input onclick="hideit('$var3')" type="button" id="btn_show_$var3" value="hideit"><br/>\n~,
qq~<ol id="$var3" style="display: none"><li><b>$var3->{name} \: $var3->{value}</b></li></ol>\n~,
qq~</div>\n~;
This isn't something Perl can do for you. You will need to do it in JavaScript. Have a look at the jQuery lib's function toggle(). That should do what you want. Add your paragraph and add some sort of button or whatever. Then add a click-handler to that button to toggle the paragraph.
Here's an excerpt from the documentation:
We can animate any element, such as a simple image:
<div id="clickme">
Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123" />
We will cause .toggle() to be called when another element is clicked:
$('#clickme').click(function() {
$('#book').toggle('slow', function() {
// Animation complete.
});
});
Don't forget to load the jQuery files in the <head> section of your HTML document.
I am trying to have tooltip for my personal website http://www.stacked.in. when I move the mouse on the link, I want to have tooltip displayed. Tooltip display content is already available inside the html page as a div element, but it is hidden. I want the tool-tip to be displayed only when I move the mouse over the link. I use jquery and jquery plug-in
http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/ for this purpose. Even if I get the some other jquery-plugin, I would be happy.
Please note that tooltip-content div inner html would not shown. Tooltip supposed to get the element and display it.
#tooltip-content {
display:none;
width:250px;
}
here is HTML code..
<div id="widget" class="span-8 " >
<h2>Example.com</h2>
<ul>
<li><h3>Example News 1</h3>
<div id="tooltip-content">
<div class="published">Thu Jul 8, 2010</div>
<div class="content">
This detail news 1 shown only on tooltip..
</div>
</div>
</li>
<li><h3>Example News 2</h3>
<div id="tooltip-content">
<div class="published">Thu Jul 8, 2010</div>
<div class="content">
This detail news 2 shown only on tooltip..
</div>
</div>
</li>
</ul>
There would be more than 100 elements requires tooltip. Any better tool or way to handle this problem? If you give me the code sample, I would be greatful to you.. I already searched so many ways of doing it. http://code.google.com/p/jquery-very-simple-tooltip/ comes near to solution but it requires initialization for all the tooltip notes.
I've found jQuery Tools from http://flowplayer.org/tools/tooltip/index.html to have an excellent tooltip. You can use either a title attribute on the element, or use the next DOM node as the tooltip for a non-titled element.
Very flexible, and I'm sure it'll suit your needs appropriately. Good luck!