I am currently using jquery slideonlyone function. I am having problems implementing an expanding/collapsing image(Plus.png)(Minus.png) change when clicked on. this is my jquery code.
<script type="text/javascript">
function slideonlyone(thechosenone) {
$('div[name|="newboxes2"]').each(function(index) {
if ($(this).attr("id") == thechosenone) {
$(this).find("img").attr({src:"Minus.png"}).slideDown(200);
}
else {
$(this).find("img").attr({src:"Plus.png"}).slideUp(600);
}
});
}</script>
<table><tr>
<td>
<div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px;">
<a id="myHeader1" href="javascript:slideonlyone('newboxes1');" ><img src="images/faq_cuts/Plus_Circle.png";/>slide this one only</a>
</div>
<div name="newboxes2" id="newboxes1" style="border: 1px solid black; background-color: #CCCCCC; display: block;padding: 5px;">Div #1</div>
</td>
<td>
<div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px;">
<a id="myHeader2" href="javascript:slideonlyone('newboxes2');" ><img src="images/faq_cuts/Plus_Circle.png";/>slide this one only</a>
</div>
You don't actually have any images in your html.
Also, you are using attr incorrectly. If you want to set the src of an image it would be .attr("src","Minus.png").
Related
I try to select a div which has a specific html. Look at my example:
$("#clickMe").click(function(){
$("div:contains('heinrich')").css("background-color", "limegreen")
});
.normal {
width: 100px;
height: 100px;
display: inline-block;
}
.red {
background-color: red;
border: 1px solid black;
}
.blue {
background-color: blue;
border: 1px solid black;
}
.yellow {
background-color: yellow;
border: 1px solid black;
}
#masterdiv {
border: 10px solid gray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="masterdiv">
My favorite frends are:
<div class="red normal" id="div1">
hans
</div>
<div class="blue normal" id="div2">
franz
</div>
<div class="yellow normal" id="div3">
heinrich
</div>
</div>
<button id="clickMe">
Clicking me should make only heinrichs div limegreen
</button>
jsFiddle: https://jsfiddle.net/fj1brnv8/2/
However, the parent div's color also changes.
Is there a way to only select the element itself, I am not allowed to use ID's.
Better mention the className in the selector $("div .normal:contains('heinrich')")
$("#clickMe").click(function(){
$("div .normal:contains('heinrich')").css("background-color", "limegreen")
});
.normal {
width: 100px;
height: 100px;
display: inline-block;
}
.red {
background-color: red;
border: 1px solid black;
}
.blue {
background-color: blue;
border: 1px solid black;
}
.yellow {
background-color: yellow;
border: 1px solid black;
}
#masterdiv {
border: 10px solid gray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="masterdiv">
My favorite frends are:
<div class="red normal" id="div1">
hans
</div>
<div class="blue normal" id="div2">
franz
</div>
<div class="yellow normal" id="div3">
heinrich
</div>
</div>
<button id="clickMe">
Clicking me should make only heinrichs div limegreen
</button>
In your exable should be different selector:
$("#masterdiv > div:contains('heinrich')")
Just change the root selector.
UPDATE
Select every div and use the filter method.
Clone the div you're filtering, select all the children (nested divs), remove them then "come back" to the parent cloned div and retrieve the text.
Having the text, compare the contents with the text you're searching.
$("#clickMe").click(function(){
$("div").filter(function(idx, val) {
return /heinrich/gi.test($(this).clone().children().remove().end().text());
}).css("background-color", "limegreen")
});
.normal {
width: 100px;
height: 100px;
display: inline-block;
}
.red {
background-color: red;
border: 1px solid black;
}
.blue {
background-color: blue;
border: 1px solid black;
}
.yellow {
background-color: yellow;
border: 1px solid black;
}
#masterdiv {
border: 10px solid gray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="masterdiv">
My favorite frends are:
<div class="red normal" id="div1">
hans
</div>
<div class="blue normal" id="div2">
franz
</div>
<div class="yellow normal" id="div3">
heinrich
</div>
</div>
<button id="clickMe">
Clicking me should make only heinrichs div limegreen
</button>
This should do
$("#clickMe").click(function(){
$("#masterdiv div:contains('heinrich')").css("background-color", "limegreen")
});
Since you didn't want to use ids I can suggest you to try this.
$('div > div:contains(heinrich)').css("background-color", "limegreen")
Working Fiddle: https://jsfiddle.net/g50cfqzw/
Try this
$("#clickMe").click(function(){
var html_trg="heinrich";
$('.normal').each(function(i,u){
var divtxt=$(u).html();
divtxt=$.trim(divtxt);
if(divtxt==html_trg){
$(u).css("background-color", "limegreen");
}
});
});
try this it will work
$("#clickMe").click(function(){
$("div#masterdiv").find('div.normal:contains(heinrich)').css("background-color", "limegreen")
});
Alright so basically i've been searching for a way that when someone clicks a text , a scroll down menu drops down with basically more information ( Sort of like a read more ).
I little experience in Java or Jquery and im not even sure where the problem is wether it's in my functions.php or my script itself . I've done alot of research and tried alot of things but none seem to be able to help me out so i figured id make my own post .
Keep in my , i took most of the codes in templates given by other member and tried to modify the code so it works with my site, I am trying to accomplish something similar to this site : http://www.randomsnippets.com/2011/04/10/how-to-hide-show-or-toggle-your-div-with-jquery/ the second example where there are 3 boxes and only one shows up when you click on it, However mine will simply be text instead of boxes)
My Javascript file looks like this(as stated in comment idk what thechosenone is , my guess is when you select a box it is now known as the chosen one ) :
jQuery(document).ready(function (){
$('.newboxes').each(function(index) {
if ($(this).attr("id") == thechosenone) {
$(this).show(200);
}
else {
$(this).hide(600);
}
});
}(jQuery)
So i went ahead and modified my function.php and added these line of code :
add_action('wp_enqueue_scripts', 'showonlyone' );
function showonlyone() {
wp_enqueue_script('showonlyone', get_template_directory_uri() . "/js/showonlyone.js");
}
As for calling the java script into my wordpress page I have no idea how to do this . The template gave me something like this :
<table>
<tr>
<td>
<div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px; width: 150px;">
<a id="myHeader1" href="javascript:showonlyone('newboxes1');" >show this one only</a>
</div>
<div class="newboxes" id="newboxes1" style="border: 1px solid black; background-color: #CCCCCC; display: block;padding: 5px; width: 150px;">Div #1</div>
</td>
<td>
<div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px; width: 150px;">
<a id="myHeader2" href="javascript:showonlyone('newboxes2');" >show this one only</a>
</div>
<div class="newboxes" id="newboxes2" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px; width: 150px;">Div #2</div>
</td>
<td>
<div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px; width: 150px;">
<a id="myHeader3" href="javascript:showonlyone('newboxes3');" >show this one only</a>
</div>
<div class="newboxes" id="newboxes3" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px; width: 150px;">Div #3</div>
</td>
</tr>
</table>
Can someone please tell me how im supposed to be calling this function and add it to a block of text ? I just want that when someone clicks on it , this box or whatever, drops down and displays additional information and when you click on another line of text this window will scroll back up and the other one will drop down .
Took me a minute but here you go:
http://jsfiddle.net/V4DTZ/
Now, for whats going on in the code:
<table>
<tr>
<td>
<div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px; width: 150px;">
<a class="newboxes" href="#" id="newboxes1">show this one only</a>
</div>
<div class ="div_newboxes" id="div_newboxes1" style="border: 1px solid black; background-color: #CCCCCC; display: block;padding: 5px; width: 150px;">Div #1</div>
</td>
<td>
<div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px; width: 150px;">
<a class="newboxes" href="#" id="newboxes2" >show this one only</a>
</div>
<div class ="div_newboxes" id="div_newboxes2" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px; width: 150px;">Div #2</div>
</td>
<td>
<div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px; width: 150px;">
<a class="newboxes" href="#" id="newboxes3" >show this one only</a>
</div>
<div class ="div_newboxes" id="div_newboxes3" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px; width: 150px;">Div #3</div>
</td>
</tr>
You'll see that I changed the id of the links to their corresponding div, and I added a div_ prefix on the ids of the div.
This way we have an easy way to select the div that matches with the link
I gave all of the links the same class, so that we can set up one onclick event for all of the links.
All of the div that contain your content also has the same class, so we can toggle them all at once.
Here is the jquery:
jQuery(document).ready(function (){
$('.newboxes').on('click', function(){
var div_id = "#div_" + $(this).prop('id');
$('.div_newboxes').each(function(i, value){
if($(value).prop('id')=== $(div_id).prop('id')){
$(div_id).show(200);
}
else{
$(value).hide(600);
}
});
})
}(jQuery))
Note that because we used an onclick event for all elements with class = "newboxes"
we are now able to use this to refer to the specific calling element. There is now no need to have theChosenOne variable.
When document is ready, attach event handlers to all of the elements needed
The event handler that is called every time a click happens on these elements
Event Handler
var ShowHideBlocks = function(){
$('.newboxes').each(function(index) {
if ($(this).attr("id") == thechosenone) {
$(this).show(200);
}
else {
$(this).hide(600);
}
});
}
Attached to all interested elements
jQuery(document).ready(function (){
$('.newboxes').each(function(index) {
$(this).bind('click',function(){
thechosenone = $(this).attr(id); //thechosenone is a global variable
ShowHideBlocks(); // Invoke the showHide method as part of anonymous handler
});
}
});
}(jQuery)
I've got a jade email template. It includes a mixin file which includes the header mixin, which should be in all emails. It gets included properly, but due to the nesting level within it (3 levels deep), anything I put after the mixin, doesn't maintain nesting where it should.
views/mixins/email.jade
mixin header(siteLogo)
div(style='margin-bottom: 20px; border: 1px solid #ddd; padding: 20px; width: 50%; margin: 0 auto 20px;')
div(style='text-align: center; border-bottom: 1px solid #EEE; padding-bottom: 10px;')
img(src='#{siteLogo}', style='text-align: center;')
views/emails/forgot_password.jade:
include ../mixins/email
+header(siteLogo)
p
| Hi #{name},
p
| Welcome to the site!
Generates the email html like:
<div style="margin-bottom:20px;border:1px solid #ddd;padding:20px;width:50%;margin:0 auto 20px">
<div style="text-align:center;border-bottom:1px solid #eee;padding-bottom:10px">
<img src="path/to/image/logo" style="text-align:center">
</div>
</div>
<p>Hi BobCobb</p>
<p>Welcome to the site!</p>
But I want both of those paragraph tags to be inside of the main <div> like:
<div style="margin-bottom:20px;border:1px solid #ddd;padding:20px;width:50%;margin:0 auto 20px">
<div style="text-align:center;border-bottom:1px solid #eee;padding-bottom:10px">
<img src="path/to/image/logo" style="text-align:center">
</div>
<p>Hi BobCobb</p>
<p>Welcome to the site!</p>
</div>
To actually answer the original question, you need to specify within the mixin where the block should render.
views/mixins/email.jade
mixin header(siteLogo)
div(style='margin-bottom: 20px; border: 1px solid #ddd; padding: 20px; width: 50%; margin: 0 auto 20px;')
div(style='text-align: center; border-bottom: 1px solid #EEE; padding-bottom: 10px;')
img(src='#{siteLogo}', style='text-align: center;')
if block
block
Jade is useless for html email. I would strongly recommend against using any web intended framework.
Read up more on how html email differs from the web.
Here is what your code should look like if it is optimized for html email:
<table width="50%" border="0" cellpadding="0" cellspacing="0" style="border:1px solid #dddddd">
<tr>
<td align="center">
<img alt="" src="path/to/image/logo" width="100" height="75" style="margin: 0; border: 0; padding: 0; display: block;">
</td>
</tr>
<tr>
<td style="font-family: Helvetica, Arial, sans-serif; font-size: 14px; color: #000000; padding:20px; border-top:1px solid #dddddd;">
<p>Hi BobCobb</p>
<p>Welcome to the site!</p>
</td>
</tr>
</table>
I found this code and it is the perfect solution for my problem but i just found out it won't work in ie9. Does anyone know how to re-write this code to work in IE9? here is the javascript code for it.
function showonlyonev2(thechosenone) {
var newboxes = document.getElementsByTagName("div");
for (var x = 0; x < newboxes.length; x++) {
name = newboxes[x].getAttribute("class");
if (name == 'newboxes-2') {
if (newboxes[x].id == thechosenone) {
if (newboxes[x].style.display == 'block') {
newboxes[x].style.display = 'none';
}
else {
newboxes[x].style.display = 'block';
}
} else {
newboxes[x].style.display = 'none';
}
}
}
}
I ran it in jsFiddle and got this error:
Problem at line 4 character 9: Read only.
name = newboxes[x].getAttribute("class");
also here is the HTML part (short Version removed the head and body tags):
<table>
<tr>
<td>
<div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px; width: 150px;">
<a id="myHeader1" href="javascript:showonlyone('newboxes1');" >show this one only</a>
</div>
<div class="newboxes" id="newboxes1" style="border: 1px solid black; background-color: #CCCCCC; display: block;padding: 5px; width: 150px;">Div #1</div>
</td>
<td>
<div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px; width: 150px;">
<a id="myHeader2" href="javascript:showonlyone('newboxes2');" >show this one only</a>
</div>
<div class="newboxes" id="newboxes2" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px; width: 150px;">Div #2</div>
</td>
<td>
<div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px; width: 150px;">
<a id="myHeader3" href="javascript:showonlyone('newboxes3');" >show this one only</a>
</div>
<div class="newboxes" id="newboxes3" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px; width: 150px;">Div #3</div>
</td>
</tr>
</table>
here is my jsFiddle view
http://jsfiddle.net/Nuker_Viper/JvLDx/13/
Your edit makes the question clearer:
I ran it in jsFiddle and got this error: Problem at line 4 character 9: Read only.
name = newboxes[x].getAttribute("class");
You haven't declared name anywhere, so you're using name in some containing scope (probably global scope, e.g., window.name). Apparently IE9 considers that a read-only property, although I can't find any docs to support that.
In any case, you don't want to be mucking about with someone else's variable. Put var name; at the top of your function so you're using your own variable. :-)
Original answer when we had to guess at what was going wrong:
IE has a long-standing bug where it thinks the class attribute is called className, even in getAttribute. IE9 continues this bug in the misnamed "compatibility" mode. In standards mode, it gets it right.
The best thing to do is to avoid the issue entirely, since there's no need to use getAttribute for the class attribute; use the reflected property instead:
name = newboxes[x].className;
I have a snippet of Javascript code as follows:
<div id="TestControl" contentEditable="true" style="width:200px; position:absolute; left:100; top:100; border: 1px solid #000;"></div>
<div style="position:absolute; left:100; top:200; width:200px; border:1px solid #000; padding: 5px 5px 5px 5px;" id="displaydiv" ></div>
<script>
document.getElementById("TestControl").onkeyup = function() {
document.getElementById("displaydiv").innerHTML = this.value;
}
</script>
This code works fine if I replace the contenteditable div with an input text box. Why the disparity?
Thanks for looking :)
A content div does not have a property called value
<div id="TestControl" contentEditable="true" style="width:200px; position:absolute; left:100; top:100; border: 1px solid #000;"></div>
<div style="position:absolute; left:100; top:200; width:200px; border:1px solid #000; padding: 5px 5px 5px 5px;" id="displaydiv" ></div>
<script>
document.getElementById("TestControl").onkeyup = function() {
document.getElementById("displaydiv").innerHTML = this.value || this.textContent || this.innerText || this.innerHTML;
}
</script>