Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
Is there a possibility of "linking" two CSS elements in jQuery?
An example from my project:
I'd like to append a .focused class to multiple elements at once when certain things happen. They all have the same prefix in their ID, but there is >1 of those prefixes (like #first-header - #first-button ; #second-header - #second-button and so on). It would probably use some regular expressions, but I can't seem to figure this stuff out.
A more accurate example, because I'm bad at explaining things:
When #first-header is .focused, append the same .focused class to #first-button as well. And that would need to work to any pair of -header and -button.
I hope I explained it well enough and am thankful for any kind of help.
You can easily select all items whose id starts with first- like this
$('[id^="first-"]').addClass('whatever');
It sounds like instead of using patterns in the ID of your HTML elements you should be using classes.
Example HTML:
<div id="first-button" class="button">...</div>
<div id="second-button" class="button">///</div>
Javascript:
$(".button").click(function(){ /*do stuff*/});
That Javascript would attach a click handler to all div elements with the class button.
$('[id$="header"]').on('focus blur', function(e) {
$('#' + this.id.split('-').shift() + '-button').toggleClass('focused', e.type=='focus');
});
FIDDLE
You cannot have multiple ids for one element. The proper way to do what you're doing is to give everything that you want to change a class like "toFocus"
Try this:
$("[name$='header']").focus(function(){
var t = $(this).attr("id").split("-")[0];
$("#"+t+"-button").addClass("focus");
});
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I have the following HTML
<div id="example">
...some text...
<script type="text/javascript">
... some javascript...
</script>
</div>
How to get content of #example but also without the JavaScript tags or JavaScript code?
And to answer the general question, if you need to get the contents of a node with some of the children not included, you probably need to remove the tags you don't want in there, in your case the script tags.
If you need to keep the original intact, take a look at cloneNode (https://developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode) on how to get a clone of the node that you can work on without touching the original.
If you just want to grab the text that's inside the id="example", you could just use:
var getExample = document.getElementById('example').innerHTML;
or with jQuery:
var $getExample = $('#example').html();
I'm assuming you just didn't want the JavaScript inside the id="example" div, being as you tagged this JavaScript. In that case you could create a JavaScript file and add it with
<script src="javascriptFileName.js"></script>
this would be placed at the bottom of the body.
With jquery you can try this way. See here http://jsfiddle.net/AnjJa/129/
var el = $('#example').clone();
el.find('script').remove();
alert(el.html());
But why you put the JS there?
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I am looking for the easiest way (coding and execution time) to remove nested tags from a DOM element using javascript.
Example case:
<i><b>This <b><i>is <u>a</u> new</i></b> test</b></i>
Wanted solution:
<i><b>This is <u>a</u> new test</b></i>
The solution needs to work generally with all possible html tags and not just for the above example.
All nested tags need to be eliminated while keeping the inner HTML in the DOM.
The solution may but doesn't need to use jQuery.
Any suggestions?
You could try that for simplicity:
$("body *").each(function () {
if ($(this).parents(this.nodeName.toLowerCase()).length) $(this).contents().unwrap();
});
-DEMO-
Using the find method you could search for all children of the <b> tag inside the <i> tag:
JS:
$('i b').find('b', 'i').contents().unwrap();
This is a minor improvement to A.Woffs solution regarding code execution.
This way one jQuery element less gets initialized per dom node.
But i won't change the accepted answer to this answer for such a minor improvement.
$("body *").each(function () {
var $this = $(this);
if ($this.parents(this.nodeName.toLowerCase()).length) $this.contents().unwrap();
});
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
(-)
I need to replace the (-) by an image
How can I achieve this using css in drupal?
I'll assume that by "replace" you mean to add an image inside an <a> tag through css only.
Yes, it is possible. You can use Css Pseudo Elements. Something like:
a:before {
content: url('img.jpg');
}
Sample JsFiddle
Or, if you really want to "replace" it, you can use a simple Javascript approach:
var element = document.getElementById('anchor_id'); //Or whichever DOM select method you want.
element.innerHTML = "<img src='img.jpg' />";
And, if you still wants something more robust, you can use document.createElement to create the image element, and then .appendChild() to place it inside the anchor.
There are endless solutions... :)
Here is a more robust solution to supplement #LcSalazer solution
var a = document.getElementsByClassName('facetapi-zero-results');
var arr = Array.prototype.slice.call( a )
arr.forEach(function (item) {
if ( item.innerHTML == "(-)" ) {
item.innerHTML = "<img src='http://placehold.it/300x300'>"
}
})
To me it seems like you're trying to do this:
<img src = "yourimage.png"/>
This wraps the image in a link.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
Let’s say I’ve put, somewhere on the internet, a link to my website. To be specific, it was a URL with an anchor/hash linking to a part of an article, like this: http://example.com/article/#subsection.
Now, if someone came through this link to my website, how can I trigger CSS/JS to make some action?
In my particular case, I want to add a style to the <div> with an id of subsection when someone uses the link containing #subsection.
Any ideas?
Given IE9 and later, this is possible entirely through the :target pseudo-class:
#subsection:target {
…
}
If what you're trying to do is to highlight a section on your page that matches the hash value in the current URL (which isn't entirely clear from the wording in your question) and you want to support a wide range of older browsers, then you can do something like this:
The hash value is not sent to the server so you would have to apply a change in client-side javascript. You can do that by adding a class to the object that matches the hash name when your page loads:
<script>
var id = window.location.hash.slice(1);
if (id) {
var obj = document.getElementById(id);
if (obj) {
obj.className += " specialStyle";
}
}
</script>
Or, using jQuery:
<script>
if (window.location.hash.length > 1) {
$(window.location.hash).addClass("specialStyle");
}
</script>
These scripts must be located anywhere after the elements you wish to add the class to or protected from executing until the DOM is loaded using something like $(document).ready(), though the sooner the script can run, the sooner the new style will show.
It's unclear to me whether the XSS vulnerability mentioned in the comments is still an issue in jQuery now or not, but you could either using the plain javascript version (which does not contain this vulnerability) or further protect against that in the jQuery version with something like this:
<script>
if (window.location.hash.length > 1) {
$(window.location.hash.replace(/[<>]/g, "")).addClass("specialStyle");
}
</script>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
Hello i have been trying to make a dynamic collection that i can post to the server, after some struggeling i found this guide;
http://jarrettmeyer.com/post/2995732471/nested-collection-models-in-asp-net-mvc-3
Great written but i havent got it to work for my needs.
Everything works fine exept one "little" annoying thing.
First some information about what im trying to achive;
My classes looks like this;
Qpack has a list of questions
question has a list alternatives
The interface that i have created looks like this;
And this is the markup.
The "add Question"-button works great and the markup match, The thing that dosent work is that wen i click on "Add Alternative" it is always being added to the first question. But the markup is fine as seen in the second picture.
The function responsible for the append looks like this;
function addNestedForm(container, counter, ticks, content) {
var nextIndex = $(container + " " + counter).length;
//var nextIndex = $(counter).length; // Orginal
var pattern = new RegExp(ticks, "gi");
content = content.replace(pattern, nextIndex);
$(container).append(content);
resetValidation();
}
I want to append to the most relative "alternatives" but it seems that it always goes for the first, any idea how to get it to understand the "nearest" alternatives?
When a jQuery selector specifies an ID (#) and there are multiple IDs in the Html document that have that Id jQuery will always return the first.
You must have a way to specify the "Alternatives" uniquely throughout your page.
Alternatively (pun intended) you can create a new css class, replace
<div id="alternative" ...
with
<div class="alternative-container" ...
Then on your action of "Add Alternative" you can
var container = $(this).parents('div.alternative-container:first');