How to display a new image/window when rollover another image/link - javascript

I know this will be an easy one for you guys but I couldn't figure out how to do something like this; http://backpack.tf/
On that page, when you take your mouse to any item it opens a new small window displaying some text/image. What are my options for achieving something like that? JavaScript? I tried using "onMouseOut=" with HTML but it is too simple for what I have in mind.

I'd be tempted to say this is almost certainly a duplicate: Is there a JQuery tooltip plugin that supports HTML content and automatically positions tooltips?. To name but one :)
Either way you should look at tooltips, a quick google search found this:
http://jqueryui.com/tooltip/
It should let you use html content inside the tooltop.

you can use Hover event in jQuery or javascript whatever you like and in that even write your code whatever you want to achieve etiher showing block or displaying image:-
$("#idOfElement").on("hover", function()
{
////your code
});

Related

How do I use Javascript to delay visibility of a text box and then hide another box after the first becomes visible

Im very new to this and have reviewed other posts similar to this question. However, I'm finding that those solutions don't work for me.
Background: I'm working in Wix's Velo platform for Javascript. (forgive me if that's not the right technical terminology here)
My goal: When my website home page loads, I want one of the text boxes on the page (#text45) to NOT be visible until 5 seconds have passed. Then, when box #text45 is visible, I want another plain box (#box2) to turn to hidden.
I have found some examples like the one below: (not all code has been pasted and I realize some elements like div1 would need to change to my specific element names)
document.getElementById("div1").style.visibility = "visible";
}
setTimeout("showIt()", 5000);
However, I get an error code: Cannot find name 'document'. Do you need to change your target library? Try changing the 'lib' compiler option to include 'dom'.
When researching this, I found out that Velo cannot access the dom and elements can only be accessed via "$w".
Would someone be kind enough to set me in the right direction on how to accomplish the "goal" above? I would really appreciate it! Thank you in advance.
Here's how you would do it. Note, that it's good practice to change the IDs of your elements to more descriptive names, but I've stuck with the names you provided in your question.
Start by setting #text45 to hidden in using the Properties & Events panel.
Then use this code (note that your page might already have an onReady. If it's there an you're not using it yet, delete all the code on the page and replace it with this):
$w.onReady( () => {
setTimeout(() => {
$w('#text45').show();
$w('#box2').hide();
}, 5000)
} );

(JavaScript ?) Display div with different content on choice?

I'm looking for a solution that will allow me to display a div when I click on a single link (which will change the way css style) with variable content (eg a sub-div with service1, service2, service3 ). This div will be displayed also propose several offers that will only display the div payment when one of these offers will be selected.
It's maybe hard to explain (i'm not english so sorry for really noob level), so maybe with this image you will "understand" a little bit more:
http://image.noelshack.com/fichiers/2015/38/1442422045-fonctionnement.jpg
I confess to being a bit lost with JavaScript for this kind of thing. I know it's probably achievable, but how? :-(
Thank you for your help folks!
If you want to go the way with altering CSS with javascript, assuming you are not creating the variable content on the fly, have the divs css for display set to none.
#divID {
display = none;
}
Then set an event listener on your link to change the display style to block.
document.getElementById("linkID").addEventListener("click", function() {
document.getElementById("divID").style.display = "block";
}
Ok so I created a crude representation of what you asked without much effects. But the fiddle I created completely functions as you intended. If you click buttons on div 1 the content of div 2 gets updated. If you click anything on div2 the information is displayed in div3. Here is the example: Working Example
window.function1 = function(){
var edits = document.getElementById('2');
edits.style.background="aliceblue";
}
//SAMPLE CODE TO EDIT ANY ELEMENT BY REFERRING BY ID. CALL SUCH FUNCTION ONCLICK
Please check the example to understand it fully.

side sliding menu tab

i want to implement a right side sliding menu similar to the one in amazon.com..
i am trying to use javascript to edit the script on every mouseover/onclick event..
i want to hide/show the table on every event.
function show(a){
var id="myMenu"+a
if (i<-12){
i=i+speed;
document.getElementById(id).style.left=i;
}
}
function hide(a){
var id="myMenu"+a
if (i>-135){
i=i-speed;
document.getElementById(id).style.left=i;
}
}
this should be good to show/hide the tables.. but how to id dynamically add two tables one over another..because the main menu table will always be visible, but the sub menu when hidden will be beneath the main menu..
any method to do the same?
am i in the right path?
Definitely on the right path, this is a good test of concept.
I would suggest you look at jQuery (or other JavaScript libraries like Scriptaculous) specifically at the slideToggle() and toggle() methods.
Don't want to give it all away, but take a look at the Amazon source code, you may get some helpful little tips. :P

jQuery/Javascript Plugin best practice

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>

How to use onmouseover?

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

Categories

Resources