I'm having a problem in using the tooltip from wz_tooltip.js on a while function.
I want when I use the mouseover function for the tooltip to appear , I want to make 2 of them with separate text for each other.
When I'm using the double quotes only one of them is appearing.
Where is my code wrong and doesen't make the second tooltip appear next to it and to have different size and text?
echo "
<a href=\"".$optiune."\" onmouseover=
\"Tip('<div class=split-para>Tip:".$informatie['tip']."<span>(si aici raritatea)</span></div>
<br> <center>".$informatie['nume_ro']." ".$variabila_echipat." ".$variabila_enchant."
</center> ".$variabila_putere." ".$variabila_procent_putere."
".$variabila_dex." ".$variabila_procent_dexteritate." ".$variabila_rez."
".$variabila_procent_rezistenta." ".$variabila_carisma."
".$variabila_procent_carisma." ".$variabila_intel."
".$variabila_procent_inteligenta." ".$variabila_pret_cumparare."
".$variabila_atac." ".$variabila_procent_atac." ".$variabila_aparare."
".$variabila_procent_aparare." ".$variabila_posibilitatea_daune."
".$variabila_daune_min." ".$variabila_procent_daune_minime."
".$variabila_daune_max." ".$variabila_procent_daune_maxime."
".$variabila_viata." ".$variabila_viata_reg." ".$variabila_mana."
".$variabila_mana_reg." ".$variabila_enchant_grad_tip." ".$variabila_cantitate."
".$variabila_posibilitate_vanzare." ".$variabila_pret_vanzare." <center><br>
".$variabila_posibilitate_echipare." ".$mesaj_set." <br><br> ".$variabila_niv_min."
</center>')
;\"Tip(' test ')\"
onmouseout=\"UnTip()\">
<img src='".$informatie['cale_imagine']."/".$informatie['imagine'].".png'
alt=".$informatie['id']." ></a>
";
The whole function is retriving some info for some objects and echo it when you user the mouseover over some picture.
I want when I use the mouse over that picture , 2 tooltips in the right of the picture not only one
Here's a working fiddle : http://jsfiddle.net/alexgoaga/yjv1Ltre/1/ , press ok when the error appears
Thank you :)
So, unfortunately it looks like the way wz_tooltip works is by adding a div element to the body and then toggling its visibility, contents and position.
Unfortunately that means that you will likely need to add both of your desired elements inside the one tooltip if you want to keep using wz_tooltip.
HTML
<a href="#" onmouseover="Tip('<div id=\'element1\'>section1</div><div id=\'element2\'>section2</div>');" onmouseout="UnTip()">
<img src="http://84.232.199.159/img/items/ar_bow.png" alt="" />
</a>
CSS
#WzTtDiV{
overflow:visible !important;
}
#WzBoDy{
background:none !important;
border:none !important;
outline:none !important;
box-shadow:none !important;
}
#element1,
#element2{
color:white;
position:absolute;
}
#element1{
top:0;
left:0;
height:20px;
width:auto;
padding:0 30px;
background:blue;
}
#element2{
top:30px;
left:20px;
height:40px;
width:auto;
background:red;
}
Have a look at this example
Related
Hi i am doing a Vanilla JS practice to learn how to animate the margins using vanilla JS conditionals.
I am trying to make 2 divs (side by side on another) slide open towards the sides when you click on it, like a sliding door.
I want to do this with just vanilla JS even though I know that it is possible with CSS.
My function isn't working and I don't know why it isn't as the browser isn't showing any errors.
I intend to increase the right margin of the left door to create the opening effect, but I'm not sure if thats the correct direction to go about it.
Here's my code:
JS:
function opena(className){
var dura = 2;
var eleme= document.getElementsByClassName(className)[0];
var jupiter = eleme.style.marginRight;
var mars =eleme.style.marginLeft;
window.setInterval(()=>{
if(eleme.classList.contains('left')){
if(jupiter!=50){
jupiter++;
jupiter+"vw";
}
}else if(eleme.classList.contains('right')){
if(mars!=50){
mars++;
mars+"vw";
}
}
},dura)
}
css:
.pack{
width:100%;
}
body{
margin-left:0;
margin-right:0;
}
.left{
background:red;
display:inline-block;
width:50vw;
margin-left:0;
margin-right:0;
}
.right{
background:blue;
display:inline-block;
position:absolute;
width:50vw;
padding-left:0;
margin-left:0;
margiin-right:0;
}
*
*HTML:**
<body>
<div class="pack">
<div class="left" onClick="opena('left')">A</div>
<div class ="right" onClick="opena('right')">B</div>
</div>
</body>
Thanks for any assistance rendered!
I'd like to make it so that when users hover over a picture on my website, they get a grey box the same size as the picture, and inside the grey box is a list; each of the items on the list link to a different site. I don't know how to do this; I can only find tutorials on how to replace images with other images when users hover over them. I don't want that; I want to replace the image with a box that itself contains multiple links. I don't need a specific answer so much as a general idea about how this can be done. How do you developers do this?
What may make this more complicated is that I would like to line up three pictures just like this in a horizontal row; for each picture, users can hover over them and then click on an item in the list.
(I'm new to html and css, and I'm willing to use JavaScript if that's the best solution. Thank you in advance for your help!)
Here is the html:
<div id="container">
<img id="image"/>
<div id="overlay">
Link 1<br>
Link 2<br>
Link 3<br>
</div>
</div>
Here is the css:
#container {
position:relative;
width:100px;
height:100px;
}
#image {
position:absolute;
width:100%;
height: 100%;
background:black;//should be url of your image
}
#overlay {
position:absolute;
width:100%;
height:100%;
background:gray;
opacity:0;
}
#overlay:hover {
opacity:1;
}
JsFiddle link
On wrapper hover,just show the div containing the lists else it should be hidden.Here is the working example.
HTML
<div class="wrapper">
<img src="http://www.gettyimages.in/gi-resources/images/Embed/new/embed2.jpg" class="showDiv" width="200px" height="200px" alt="image" />
<div class="showOnHover">
<ul>
<li>
link1
</li>
<li>
link2
</li>
<li>
link3
</li>
</ul>
</div>
</div>
CSS
.wrapper{
position:relative;
width:200px;
}
.wrapper:hover .showOnHover{
display:block !important;
}
.showOnHover{
display:none;
position:absolute;
top:0;
height:100%;
}
i have the following menu:
<div id ="navigation-menu">
<div id ="squaremenu">
<ul>
<li><a class ="homemenu" href="#Home" data-menuanchor="#Home"><img id ="homemenu" src="homemenu.bmp" height="30" width="30" /><span id="spanhome">Home</span></a></li>
<li><a class="imprimir" href="#Servicios" data-menuanchor="#Servicios"><img id ="imprimir" src="imprimir.bmp" height="30" width="30" /><span id="spanimprimir">Imprimir</span></a></li>
<li><a class="contacto" href="#Contacto" data-menuanchor="#Contacto"><img id="contacto" src="contacto.bmp" height="30" width="30" /><span id="spancontacto">Contacto</span></a></li>
</ul>
</div>
</div>
styled with css.
http://jsfiddle.net/t86Vp/
I would like if it's possible to hide most of the menu to the left and unhide it everytime i click on the menu?
If it's possible anyone can give solution with javascript/css?
Thanks in advance.
Thanks for your fast answer, i know i may not have explained myself well because english is not my main language.
Edit: What i really want is show only a portion of the menu, and everytime i clic it, then show or hide the other portion.
Once again, thanks for your fast answers
And sorry if i cant make myself clear english is not my main language.
Solution for the people with the same problem/idea: (menu that open or close every time you click it
Thanks to #Sergio
http://jsfiddle.net/6xCEp/2/
You could use this:
$('#squaremenu').on('click', function () {
$(this).addClass('abrir');
});
CSS
/************
* ADDED
*/
#squaremenu img {
display:none;
}
#squaremenu.abrir {
width:36px !important;
}
#squaremenu.abrir img {
display:block;
}
/***********
* END
*/
#squaremenu {
position:fixed;
left:0px;
top:150px;
display:block;
margin: 0px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
background:rgba(43,50,61,1);
font-size: 1em;
color:white;
width:10px; /* CHANGED!! */
height:120px;
}
Demo
You may need javascript for this. Include jquery in your page and try this
$("#squaremenu a").on("click", function(){
var $this = $(this);
$this.find("span").toggleClass("menu-item-visible");
});
You may need to group all css styles that show that menu under one class, then toggle that class as shown above. In my example I used the class menu-item-visible
Let me know if you have any more questions on this or if it's not clear
I'm by no means well versed in JS, but I'm trying to put together a simple portfolio site for school with a black transparent div to act as a lightbox. I'm using CSS and JS to toggle this div, but on a long scrolling page, it jumps to the top when turned on. Here's my CSS:
<style type="text/css">
div.transbox{
width:100%;
height:100%;
margin:0px 0px;
position:fixed;
background-color:#000000;
background:rgba(0,0,0,0.75);
z-index:99;
}
p.ptransbox{
width:400px;
padding:5px;
position:relative;
background:rgba(255,255,255,0.5);
color:#000;
border-radius:5px;
}
img.itransbox{
padding:10px;
position:relative;
background:rgba(255,255,255,0.5);
border-radius:5px;
}
Here is the JS:
var toggle2 = function() {
var mydiv = document.getElementById('02');
if (mydiv.style.display === 'none' || mydiv.style.display === '')
mydiv.style.display = 'block';
else
mydiv.style.display = 'none'
}
This is the code that is immediately viewable as the link to open the div (toggle on):
<td style="float:left; width: 33%" class="school">
<a title="Girl in Chair, 2012" class="tooltip" href="#" onclick="toggle2();" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','images/thumbs/chairO.png',1)">
<img src="images/thumbs/chair.png" id="Image2" /></a>
And this is the code that brings the "lightbox" up, with the option to toggle it off:
<a href="#" onclick="toggle2();">
<div align="center" id="02" class="transbox" style="display: none;">
<p><img class="itransbox" src="images/anti-thumbs/chair.jpg" /></p>
<p class="ptransbox"><strong>Wörner Hall</strong>, 2010</p></div></a>
Please disregard all the Titles, Alts, or anything that is just specific to the content. You can see my portfolio in action here: http://www.student.nvcc.edu/home/majeffers3/ and if you notice, when you scroll to the bottom and click on an item, it jumps you to the top. I've been a long time lurker, first time I've ever posted a question because I can't seem to find the solution. Thank you so much for all your help!
You need to prevent the default action from taking place when the link is clicked. The simplest way to do this is to return false from the onclick handler:
<a title="Girl in Chair, 2012" class="tooltip" href="#" onclick="toggle2(); return false;" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','images/thumbs/chairO.png',1)">
Please change from href="#" to href="javascript:;". It simply go to "#" link when you click.
Make sure you return false from your onclick handlers. If you don't, the default action for hyperlinks kicks in, which means you'll navigate to #, which means the top of the current page.
I have a custom check box.
The issue I have is , on hover the actual image area ( that is clickable is out of whack ) if you try it out you will see,.. firebug element inspector is best.
Fiddle here : http://jsfiddle.net/ozzy/YsbBM/1/ albeit sprite not displaying properly.
Actual demo here : http://sitehelp.com.au/demos/checkbox/
Js here:
function setCheckboxDisplay(el){
var objWrap;
objWrap = document.getElementById(el.id+"Wrap");
if(el) {
if(el.checked) objWrap.className = "styledCheckboxWrap wrapChecked";
else objWrap.className = "styledCheckboxWrap";
}
}
CSS here:
. styledCheckbox
{
line-height:20px;
height:20px;
width:20px;
filter:alpha(opacity=0.0);
opacity:0.0;
outline:0
}
. styledCheckboxWrap
{
position:relative;
float:left;
background:url("/images/cbox.png") no-repeat top left;
width:20px;
height:20px;
margin:3px;
}
. wrapChecked{background-position: 0px -20px}
. checkboxLabel{
float:left;
cursor:pointer
}
html here:
<span id="checkboxWrap" class="styledCheckboxWrap"><input type="checkbox" id="checkbox" onclick="setCheckboxDisplay(this)" class="styledCheckbox" /></span>
Checkbox 1
The problem is the checkbox hover isnt spot on, for the width and height of the checkbox. So that you have to fumble around trying to get the exact position for clicking the damn thing.
Not sure what I have done wrong but its doing my head in fixing it. lol
Any suggestions please
For your jsFiddle problem, change the drop-down that says "onDomReady" to "no wrap (head)" and it will work. As for the actual problem... do you mean that you can't click on the label to check the box, only the box? Because the checkbox works perfectly for me...