I have the following code:
<script type="text/javascript" src="/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function() {
$('#toggle1').click(function() {
$('.toggle1').toggle();
return false;
});
});
</script>
Text Before <a href="http://www.google.com">link Text After</a><br /><br />
<div class="toggle1" style="display:none;">More Text Here</div>
The problem with this is that it is not valid HTML and even though the toggle1 link and the link inside toggle1 link both work, and the "Text Before" is clickable, the "Text After" is not clickable and does not toggle.
Have you any suggestions how to fix it so that "Text After" is also clickable so that toggle would work?
Thank you all!
The browser will automatically inject a closing tag into you code to make it valid. That's why you are not able to click on the 'text after'. Please inspect through some element inspectors, then you can understand what is happening.
See how your code was rendered in browser
So why cant you make it like this?
HTML
Text Before
link
Text After<br /><br />
<div class="toggle1" style="display:none;">More Text Here</div>
JAVASCRIPT
$(function() {
$('.toggler').click(function() {
$('.toggle1').toggle();
return false;
});
});
Related
I have this div structure after clicking inside class "4u" i am calling one click event but dont know how to get data inside <p> tag.
HTML:
<div class="4u 12u(mobile)">
<section>
<header id="dynamicCampingDesc13">
<p>Loren ipsum</p>
</header>
</section>
</div>
Click event:
$(function() {
$(".image").click(function() {
alert($(this).attr('id'));
});
});
First thing, you cannot click on the <a> tag, because of its empty nature. You do not have a clickable area. But although, you can make it clickable by giving some padding or setting width and height through CSS.
Secondly, the way you need to get the contents of the <p> tag is:
$(function() {
$(".image").click(function() {
$(this).next("header").find("p").text();
});
});
Finally, the class naming. The class 4u 12u(mobile) I am not sure if this is valid. It would be better to change it to something like 4u 12u-mobile.
I would like to know how can I click on a text, and instead of linking to some external link, I would like to be able to display a paragraph on the same page.
For example, I want to have a hidden paragraph, and I want for it to be only be displayed when I click on some text.
I thought I can use "id", but I am not sure how!
<a id="tips">test</a>
Visit the Useful Tips Section
Any idea, how I can do this?
You don't necessarily Javascript. Your code is actually working, but you are not noticing it because both elements are one below the other. If you add a <div> with some height, you'll notice it.
Visit the Useful Tips Section
<div style="height: 1000px"></div>
<a id="tips">test</a>
(However, I don't mean you have to add this <div>).
you can use jquery to do it easily or if you want to avoid that, here is an alternate solution:
http://blog.movalog.com/a/javascript-toggle-visibility/
<script type="text/javascript"> <!--
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
} //--> </script>
Simply paste the above snippet of code underneath your tag and you call it by passing to it the ID of the element you wish to toggle the visibility of (this element can be anything that takes an id attribute). For example
<a href="#" onclick="toggle_visibility('foo');">
Click here to toggle visibility of element #foo</a> <div id="foo">This is foo</div>
or, in your case; include the function and:
<a id="tips" style="display:none;">test</a>
Visit the Useful Tips Section
Just takes some basic javascript code. This one right here is a good example. Comment if you want me to explain this in more detail.
<html>
<head>
<style type="text/css">
#text
{
display: none
}
</style>
<script type="text/javascript">
function callMe()
{
document.getElementById("text").style.display = 'block';
}
</script>
</head>
<body>
<div id="text">Hello! How are you?</div>
<form>
<input type="button" name="button" id="button" value= "Call Me" onclick="javascript:callMe()" />
</form>
<body>
</html>
Try add jquery and show the paragraph on click.
jsfiddle.net/6mk3a0ov/
I would like the content of a DIV to change when either of these conditions is met:
Clicking on a text link above the DIV
Hovering over the DIV itself
The DIV content should revert to its original state when the cursor is moved away from the div or the link.
My problem is this: The DIV content does not change back to the original after the link is clicked and the cursor is moved away. The onclick event seems to negate the onmouseout event.
If you have any suggestions, please post revised code to codepen; it would be greatly appreciated! Here is the code.
<html><head><title>Title</title>
<SCRIPT LANGUAGE="JavaScript">
function changeContent1()
{
document.getElementById("myDiv").innerHTML='<a href="#" onmouseout="changeContentBack1()" style="text-decoration:none"><div style="background:black;color:white;width:450px;height:203px">THIS TEXT APPEARS ON CLICK OR ROLLOVER</div>'
}
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
function changeContentBack1()
{
document.getElementById("myDiv").innerHTML='<div style="background:red;color:white;width:450px;height:203px">ORIGINAL TEXT</div>'
}
</SCRIPT>
</head>
<body>
<div style="width:450px;float:left">This is the section title. <a href="#" onclick="changeContent1()">Click for more info<br><br>
<div id="myDiv"><a href="#" onmouseover="changeContent1()" style="text-decoration:none">
<div style="background:red;color:white;width:450px;height:203px">ORIGINAL TEXT
</div></a>
</div>
</div>
</body>
</html>
I added onmouseout="changeContentBack1()" to your link on your code pen and it works fine.
http://cdpn.io/ciHek
http://codepen.io/anon/pen/ciHek
On a side note you might want to clean up your HTML and validate it. I'm seeing a lot of missing or out of place tags.
I want to use fancybox to popup a message if a certain button is clicked.
I want the fancybox message to only contain some text,
and a 'close' button, i dont mind using the default button if there is one.
can someone give an example of how it should be written in the html page and the js page?
any help will be much appreciated!
Assuming your button has an id of yourButton:
$("#yourButton").click(function () {
var content = $("<div>Hello<br /><br /></div>");
var button = $("<input type='button' value='Close Me!' />");
content.append(button);
$.fancybox({ content: content });
$(button).click(function () { $.fancybox.close(); });
});
This should be able to help you:
http://fancybox.net/howto
Once you have required all the relevant files, to hook it up to all linka, use this:
$("a").fancybox();
If the html is complicated enough you might prefer putting it in a hidden div as I've done below. This is a scaled down version of code I'm running on my site to do a fancybox dialog box. Works with FancyBox version 1.3.4 (I haven't upgrade to 2 yet). Personally, I like the default close button (circle X in top right corner) and even pressing Escape works, but I've added a custom close button to the popup. It includes javascript to close FancyBox.
<a id="mylink" href="#mypopup">link style button</a>
<div id="mybutton">button</div>
<div style="display:none">
<div id="mypopup">
<h1>My Title</h1>
<p>My Message</p>
<!--... other complex html can go here ...-->
<input type="button" onclick="$.fancybox.close();" value="Custom Close Button" />
</div>
</div>
<script type="text/javascript">
$('#mylink').fancybox();
$('#mybutton').click(function() {
$.fancybox({
'orig' : $(this),
'href' : '#mypopup'
})
});
</script>
With jquery I am adding a div and appending the text "click to view" when the div is showin I would like to change that text to "click to close"
Right now I have
$('#toggle_template')
.css('cursor','pointer')
.append(' (click to view)')
.click(function(){$('#template').toggle(500);
$('#toggle_template').find(' (click to view)').replaceWith(' (click to close)');});
With the html:
<div id ="toggle_template">This is a section header</div>
<div id="template">
Junk to show hide on click
</div>
The div is showing and hiding correctly and the text "click to view" is being added. I can't find a way to use jquery to remove the appended text I tryed .remove(click to view).append(click to close) and that didn't work. I'm sure I could wrap this text in a span and then add remove or change the class but there should be an easier way.
Any Ideas on how to change this text?
In your current codes, it can be done like this,
$('#toggle_template').css('cursor', 'pointer')
.append(' (click to view)')
.click(function() {
$('#template').toggle(500);
$('#toggle_template').html(function(i, html) {
if (html.indexOf(' (click to view)') > 1) {
return html.replace(' (click to view)', ' (click to close)');
}
return html.replace(' (click to close)', ' (click to view)');
});
});
crazy demo
This is one way:
var t = $('#toggle_template').text();
$('#toggle_template').text(t.replace(/ \(click to view\)/, ' (click to close)'));
...but you'll need more logic to change the text back.
As mentioned, it would be better to include other elements which you can show/hide in their entirety rather than modifying content dynamically like this. You could even do it entirely with css, by simply toggling a class on your toggle_template div and using the css 'after' pseudo element.
using a span is easier IMO.
but you can still do it by using regular expressions and matching / replacing (click to view) with (click to close)
I've also changed the click to a toggle and handled the changing of text back and hiding and showing of #template
Here's an example: http://jsbin.com/ixigi3/3
Also pastes here:
<!doctype html>
<html>
<head>
<title></title>
<style type="text/css">
</style>
</head>
<body>
<div id ="toggle_template">This is a section header</div>
<div id="template">
Junk to show hide on click
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
$('#template').hide();
$('#toggle_template')
.css('cursor','pointer')
.append(' (click to view)')
.toggle( function(){
$('#toggle_template').html( $('#toggle_template').html().replace(/view\)/i, "close)") );
$('#template').show(500);
},
function(){
$('#toggle_template').html( $('#toggle_template').html().replace(/close\)/i, "view)") );
$('#template').hide(500);
});
});
</script>
</body>
</html>
you can use .html(''), this will empty the div contents.
("#divid").html("");