hello what I want it is simply like in the image below :
I want if I add #element1 so the div which have the same id ="element1" so it will get colored somehow , I just want to know what to type on google so I can find a solution because I searched for javascript hash etc but without any success.
you need to use window.location.hash to get the hash value
so if your hash is #someId23
do something like:
if (window.location.hash){
$(window.location.hash).addClass('selected');
}
This answer will help you to focus div, then you can use 'div:focus, div:active' pseudo classes and add some animation there, there are a lot, google it
This is better than jQuery manipulation. Also page performance doesn't affected
Related
I picked up some code on CodePen to help me dynamically replace the content of divs. It works, but as often happens when borrowing someone's code, I can't actually mold it to what I want it to do.
The original code provides pictures of animals, and when you click it, it sends the text of the name of the animal to a div. The Javascript looks like this:
$('#kittens').click(function() {
$('div').html('Kittens');
});
$('#aardvark').click(function() {
$('div').html('Aardvark');
});
I'm applying it to a more complicated webpage, so I really can't have it just replace the first level div with the word "Kittens."
I've found that by keeping the single quotes, I can put any text or code I want in there and it works just fine, but only if I'm writing to the first level div.
So I figure to target it, I should just give it the div ID. Something like:
$('#kittens').click(function() {
$('myDivName').html('Kittens');
});
This does nothing. I've also tried 'id=myDivName' , 'id="myDivName"' , id: myDivName , and a few others I can't recall right now. Nothing I can come up with seems to work.
Does anybody know how this parameter works and how I can get it to target just the div I want?
jQuery selectors work just like CSS selectors, so instead of $('myDivName'), do $('#myDivName')
when referencing an element in jquery, you need to use it's css selector. For an element with an id "myDivName" that selector would be #myDivName so your jquery would look like:
$('#kittens').click(function() {
$('#myDivName').html('Kittens');
});
I am still having trouble understanding regex. I am also not even sure if you can target a whole page...but without knowledge of how to format regex, its getting play with it.
I have a trademarked name that appears throughout my page. I'd like to use JS to add a (r) to the end of it every time it appears.
Can jquery/js accomplish this?
$("body").each(function() {
this.innerHTML = this.innerHTML.replace(
'breathe right',
'breathe right(r)');
});
Thanks!
This is a good use case for the CSS :after pseudo-element:
CSS
.product-name:after {
content: " \00AE"; /* add restricted symbol after every element with the product-name class */
}
HTML
<span class="product-name">My Product</span>
Working Demo
The easiest way is to wrap your product name in a span and tag it with a class. I'm not sure if that's less work that just adding the symbol to your markup to begin with, though.
The benefit of this approach is it would allow you to easily apply other styles to your product name, like bolding the text or changing the font color.
You can read more about the :after pseudo-element here.
Yes, but it won't be efficient if you tell jQuery to search the entire document. To make it efficient, you'll need to have jQuery get a specific location to search if you want any efficiency in it.
You don't need jQuery :
document.body.innerHTML = document.body.innerHTML.replace(/breathe right/g, 'breathe right(r)')
I'm not particular familiar with using jQuery/Javascript so I don't know what the best way to do what I'm asking, it works but I don't know how efficient it is.
Basically I have a plugin called TipTip to create tooltips. It either takes the info from the "title" attribute of what you want the tip to appear over or you can use an option in the script to include HTML, like so:
<script type="text/javascript">
$(function(){
$(".someClass").tipTip({content:"<strong>What you want in the tooltip</strong>"; })
});
</script>
I want to generate a lot of different tooltips on my page but they all fit a similar style and really only need a changeable variable (they are an achievement progress bar so I only need to pass a single value for the % progress).
So is it alright to simply have a lot of script tags and duplicate the code above or can I pass a variable into it somehow and only keep the one piece of tooltip code at the top?
Or is this a question for suited to the devs of TipTip? Thanks in advance.
Assuming HTML5 is ok to use in this scenario, I'd reccommend using the html data attributes to store your element specific tooltips... and then using it to populate the tiptip plugin...
$(function(){
$('.toolTipClass').each(function() {
var element = $(this);
element.tipTip({
content: "<strong>"+element.data("toolTip")+"</strong>"
});
});
Now just add the HTML5 attribute like so
<div class="toolTipClass" data-toolTip="This is the tool Tip">Div Content</div>
I'm working on some small chat application. I want to implement smilies over there so when i click on some smiley it will appear in textarea where user enters his message and when user clicks on select i want smilies to appear in div that contains the conversation.
After some workarounds i got to idea that replacing textarea with div contenteditable="true"
doesn't work that well so i did wrap certain smiley name with ':' like :wink: in textarea but still i need to replace :wink: with real span containing image as background.
Problem is i don't see a way to make this dynamically but doing each one by one.
for example:
if ($('.line:contains(":wink:")').length > 0) {
var oldLineHTML = $('.line:contains(":wink:")').html();
$('.line:contains(":wink:")').html(oldLineHTML.replace(/:wink:/gi, '<span class="wink></span>"'));
I have plenty of smilies so doing this very resource expensive function will costs me much and also will cause me lots of problems during maintenance.
How can i do that dynamically? Or maybe you have better solution which will require to re-design... I'm up to it if it is required.
thanks
}
var testString = "test1 :smile: test2 :wink:";
alert(testString.replace(/:([^:]*):/g, '<span class="$1"></span>'));
My suggestion is read every string that is wrapped by colons :[something]:, then convert it into span. So that you don't have to define every smile, and it is easy to maintain.
If you are doing this on page load, then you can do this in a $(document).ready(). Then you can use selector that you have $('.line:contains(":wink:")') and use the $each operator to loop over each one and perform the update. This will cover you for the page load. But if you refactor that $each code into a method, then you can call it each time the text is updated. I think this will give you the best in both cases. Something like this:
function replaceWinks(){
$('.line:contains(":wink:")').each(function(index) {
//Replace the wink here
});
}
$(document).ready(function(){
replaceWinks();
});
I would recommend replacing the winks server side for the page load though. It will be more performant. Also it will avoid content that changes when after the first view.
Jeaffrey Gilbert's idea is good, but I have another one that may be interesting:
write down you winks the way you want(let's say [SmileName]), and when processing the text with jquery, read every one of them, and replace the [ with <div class=" then replace the ] sign, with "></div>, this way, you will end up like this:
using these smilies:
1- [smile]
2- [wink]
3- [shy]
will lead to the following markup
1- <div class="smile"></div>
2- <div class="wink"></div>
3- <div class="shy"></div>
and using CSS, you will give every class of them, a different background image, which is the smile image.
by utilizing this method, every div will lead to displaying your smilies, and you will write the code once, and end up using it wherever you want, without repeating yourself
I have a list being displayed on a JSP. On mouse hover on any of the value i need to show a description corresponding that value. Need to show description not as an alert and also cannot make the values as hyperlink.
eg.
suppose the value is ABC so on mouse hover should show AppleBoyCat.
need to use onmouseover. let me know how to do it..
What do you want to do? If you just want to show a tooltip, you can set the title attribute of any element and it will be displayed as a tooltip.
Also, the abbr tag can be used as tooltips too:
<abbr title="test">stuff</abbr>
You can go about it in two ways:
1 - a hidden dom object (a div for instance) which reveals itself when you roll over whatever
or
2 - you can rewrite the html of the particular element you're mousing over.
You can load this data in when you load everything else (either as Javascript objects, or as markup, though that's much bulkier) or you can asynchronously load the description data from a service when you mouse over (though you'll have more lag).
jQuery is a quick and dirty way to achieve this (more quick than dirty), but straight JS or pretty much any other JS library will do as well.
Perhaps not the cleanest solution but something like this:
<a class='hover' rel='tooltip'>Link</a>
//Some hidden div, putting css inline just for example
<div id='tooltip' style='display:none;'>Content</div>
$(function() {
$('.hover').mouseover(function() {
var tooltip = $(this).attr('rel');
$('#' + tooltip).fadeIn();
});
});
And offcourse add a callback hiding it again. It just takes the value from rel of the link and use as an id for the div to show.
This is a quick and dirty solution, can be made alot smoother if you just work with it a little;)
There also alot of plugins out there allowing the same functionality in a cleaner fashion.
*Edit: Just noticed you added a comment on another post that you can't use jQuery.. shouldn't tag a post with something you're not intending to use.
As TJHeuvel already said, you can simply use the title attribute.
Best approach is to build the list with both the value and title attribute from within JSP, if not possible for some reason, you can build client side array of each value and its corresponding description then using JavaScript dynamically assign the title on mouseover.
Show us some more code to get more/better help.
For simple tooltips, the title attribute is most effective, as pointed out by TJHeuvel
If you need more advanced tooltips with HTML and CSS formatting, I'd suggest you use an external library.
One that works nicely without jQuery ist wz_tooltip download here, documentation here
When included correctly, you can add tooltips by calling the functions Tip() and UnTip() as follows:
Homepage