jsFiddle
Above's the jsFiddle of my code.
NOTE: CSS is correct, no fiddling required with that.
As you may be looking at result, there's a plus ( + ) sign in front of some addresses. When you click the topmost cell with plus sign, you see landmark text. But when you click the rest, it doesn't work.
Here's the JQuery I used:
$('#landmark').click(function () {
$(this).next('#theLandmark').slideToggle();
});
Where #landmark is the plus (+) sign and the rest of the landmark text is #theLandmark.
The HTML/CSS/jQuery is working fine, as it works with the first time.
But I feel there's some more code of jQuery missing which can correct it.
Thanks!
The issue is because you have duplicated both the landmark and theLandmark id attributes amongst your elements. id must be unique within the page. If you convert them to class attributes your code works fine:
$('.landmark').click(function () {
$(this).next('.theLandmark').slideToggle();
});
<!-- one example instance... -->
<div class='landmark'>+</div>)
<div class='theLandmark hide'><b id='lmText'>Landmark: </b>Dharmkata</div>
.landmark {
cursor: pointer;
display: inline-block;
}
.theLandmark {
font-size: 12px;
}
Updated fiddle
Note that #lmtext is also repeated, although that element is not affected by your JS code. You should change that to a class too.
Related
So far, what I've done is make a link appear underlined after being clicked using this code on Bootply. However, because I'm fairly new to JavaScript, I don't know how to amend my JS function so that for the dropdown-menu link ("2") to be underlined, one must click on it twice (not consecutively necessarily), i.e., click once to let the menu dropdown and then again to underline it. What I was thinking was to include some kind of conditional statement in that function to take into consideration the special conditions that have to be met for "2" to be underlined, but I don't know how to do this.
Any ideas would be greatly appreciated!
Demo
link.onclick = function() {
this.classList.toggle('underline', ++this.dataset.clickTimes >= 2);
};
link.dataset.clickTimes = 0;
.underline {
text-decoration: underline;
}
I have an implementation of TypeAhead.js that I'm trying to alter so that the first suggestion is presented slightly differently than all others.
Basically I want to present 2 category suggestions for the first suggestion, but not the rest.
Here's my snippet for parsing the JSON and formatting it.
$(document).ready(function() {
$('.typeahead-preview .typeahead').typeahead({
name: 'search-terms',
prefetch: 'search-terms.json',
template: [
'<dl><dt>{{value}}</dt><dd>{{value}} in {{category-1}}</dd><dd>{{value}} in {{category-2}}</dd></dl>'
].join(''),
engine: Hogan
});
});
Thank you.
Since Typeahead.js presents its suggestions as <div> elements of class tt-suggestion, all within a containing <span> with class tt-suggestions you could use standard CSS to style the first suggestion uniquely, e.g.:
.tt-suggestion {
/* styles for regular suggestions */
}
.tt-suggestion:first-child {
/* additional or replacement styles for first suggestion */
}
For example I might want to display the {{category-1}} and {{category-2}} values for the first suggestion, but none of the rest.
What you are asking for is possible by doing what Stephen Thomas suggested, (my rep isn't high enough to comment on the same thread).
In your template, put a class on the things to hide:
<dl><dt>{{value}}</dt><dd class="usually_hidden">{{value}} in {{category-1}}</dd><dd class="usually_hidden>{{value}} in {{category-2}}</dd></dl>
And then in your CSS:
.usually_hidden {
display: none;
}
.tt-suggestion:first-child .usually_hidden {
display: inline;
}
I want to change display without documentGetElementById if possible but the following is not working.
html
Instructions<div id="showfaq1" style="display:none;">Open Box. Remove device. </div>
javascript:
function toggleFaq(faqid) {
//alert(faqid);
var divname = "showfaq"+faqid;
//alert(divname);
divname.style.display="block";
}
Can anyone tell me what I am doing wrong?
Thank you.
I can't get why you do not want to use getElementById, but...
If you have elements in order like this
Instructions
<div id="showfaq1" style="display:none;">Open Box. Remove device. </div>
Instructions
<div id="showfaq2" style="display:none;">Open Box. Remove device. </div>
...
Instructions
<div id="showfaqN" style="display:none;">Open Box. Remove device. </div>
You may use
Instructions
function toggleFaq(obj) {
obj.nextElementSibling.style.display = 'block';
}
In your code divname is a variable containing a string "showfaq1", which doesn't have style property.
To change the style of an element you need a reference to that element which you can obtain using document.getElementById(divname):
function toggleFaq(faqid) {
//alert(faqid);
var divname = "showfaq"+faqid;
//alert(divname);
document.getElementById(divname).style.display="block";
}
If you have an allergy to document.getElementById, you may use document.querySelector('[id="' + divname +'"]');, but its support is not as good as the former, and it's slower.
Posting a separate answer as it has no impact on my previous one. But you could make the base mechanism without JS at all, then use one of the JS-based solutions to fix it in broken browsers if needed:
HTML
Instructions
<div id="showfaq1">Open Box. Remove device. </div>
CSS
a + div { display:none; }
a:focus + div, a + div:target { display:block; }
DEMO
jQuery selector
Selecting specific span tags
I had this problem with jQuery's selector. It was a problem for hours. It could not select that specific span tag that I wanted to manipulate and that's why I'm stuck scratching my head with this one.
My goal was to add different classes for each span tag that had different style values.
Thus I almost succeeded I couldn't figure out how to add different classes to each span tag, so I ended up clueless.
I basically want the span with font-size of 180% to be in a specific class doesn't matter which really cause I can change that later if the code works. The other span tag with font-size of 100% should also have a class, the other class. I hope you get more clarity in what I'm trying to do now at least that's what I'm hoping for.
The code exists in the link below, feel free to post a fix and optionally but not required a explaination of why it didn't work! thank you.
jQuery Submission: JS Bin Post
Here's the code itself aswell.
var val1 = "font-size: 180%";
var val2 = "font-size: 100%";
var title = $("span").attr("style");
$(function(){
if ($("span:contains('font-size: 100%')")) {
$('span').addClass("text_shadow2");
if ($('span').has("text_shadow1")) {
$('span').removeClass("text_shadow1");
}
}
if ($("span:contains('font-size: 180%')")) {
$('span').addClass("text_shadow1");
if ($('span').has("text_shadow2")) {
$('span').removeClass("text_shadow2");
}
}
},function(){
if ($("span:contains('font-size: 100%')")) {
$('span').addClass("text_shadow2");
if ($('span').has("text_shadow1")) {
$('span').removeClass("text_shadow1");
}
}
if ($("span:contains('font-size: 180%')")) {
$('span').addClass("text_shadow1");
if ($('span').has("text_shadow2")) {
$('span').removeClass("text_shadow2");
}
}
});
if ($(val1==title)) {alert("1. "+title);}
if ($(val2==title)) {alert("2. "+title);}
You could do something like this to parse the style attribute. Browsers aren't going to set the font-size property to a percentage but will do the calcs instead
$('span').filter(function(){
return $(this).attr('style').match('180%');
}).addClass('someClass');
Demo: http://jsfiddle.net/AbZBD/
I want to display prices followed by a $ sign in a different color in the heading. I don't want to display all numbers in different color - just where $ sign appears and the digits after that. There could be up to two numbers after the decimal point in some cases e.g. where price is $12.50
I have access to both HTML and CSS on the server.
Please see below code that is used to display heading. Please let me know how I change this code.
{$title_short}
Thanks for your help in advance in solving this.
Example:
If you have access to the HTML, you can simply wrap all the prices in a span tag and assign some class to them. Then just use CSS to set the color:
<span class="price">$12.34</span>
Why not just add a span like:
css:
span.money{
color: red;
}
html:
$<span class="money">12.50</span>
If I understand correctly, this should do the trick if you use jQuery
$('element:contains("$")').css('color', 'whatever color you'd like');
Example
$('table th:contains("$")').css('color', 'yellow');
Assuming , you the values are in a tag (or any selectable node) , you can replace them back with a regex . Something like
$('p:contains("$")').html(function(i,html){
return html.replace(/(\$\d+(\.\d+)?)/g,function($1){
return '<em class="money">'+$1+'</em>';
});
});
Here's a quick demo .
http://jsfiddle.net/ngcBg/