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("");
Related
I have the following function:
$(document).ready(function(){
$('section').mouseenter(function(){
var id = $(this).attr('id');
$('a').removeClass('colorAdded');
$("[href=#"+id+"]").addClass('colorAdded');
});
});
For some reason, the mouseenter function does not seem to be working. When the mouse scrolls over one of the sections (which have the section tag), the corresponding link (which have the a tag) in the top right corner should gain a green background color. However, it is unresponsive.
You just need to change your JS to:
$(document).ready(function(){
$('section').mouseenter(function(){
var id = $(this).attr('id');
$('a').removeClass('colorAdded');
$("a[href='#"+id+"']").addClass('colorAdded');
});
});
It was an issue with not including quotations in selecting the a tag with the href targeting.
I'm actually don't know why your codepen example is not working, I didn't look into your code carefully, but I tried to create simple code like bellow and it worked.
the thing you probably should care about is how you import JQuery into your page.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
hopefully this following codes can help you.
$(document).ready(function(){
$('button').mouseenter( function() {
console.log('hahaha');
})
});
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="test">
<button class="test-button" > test button </button>
</div>
</body>
</html>
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 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;
});
});
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 have a stack of <div> elements that show a name. I'd like to include a + link off to the side of each <div> that, when clicked, expands the <div> and adds more detailed information (from a RoR controller).
After poking around on the net, I found link_to_remote and related RoR stuff, but I can't seem to get the right combination to work together. Can someone point me to a tutorial or show what the controller and view interaction should look like?
Thanks!
You can do this really easily with Javascript in the example below:
<html>
<head>
<title>Text Page</title>
<script language="Javascript">
function toggleDiv(divid) {
if (document.getElementById(divid).style.visibility == 'hidden') {
document.getElementById(divid).style.visibility = 'visible';
}
else {
document.getElementById(divid).style.visibility = 'hidden';
}
}
</script>
</head>
<body>
<span onClick="toggleDiv('div1');" style="cursor:pointer;">+</span>
<div id="div1" style="visibility:hidden;">This is DIV 1</div>
<span onClick="toggleDiv('div2');" style="cursor:pointer;">+</span>
<div id="div2" style="visibility:hidden;">This is DIV 2</div>
</body>
</html>
If you set the initial visibility of the DIV's to hidden, you can use the toggleDiv function shown above to toggle the visibility of any DIV given the ID. You will probably need to tweak the style definitions for the DIVs to display next to the plus signs (put them in adjacent <TD>'s in a table for example), but I figured I'd keep it simple.
Good Luck.