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...
Related
This code only applies the .current class to my span, but the span is not hidden in the first place. I want it to be hidden, then on hover + ctrl - displayed, and on mouseleave - hidden again. How can I achieve that?
html:
<div class="portlet-titlebar" ng-mouseover="hoverIn()">
<span class="remove" class="hidden">
<clr-icon shape="times-circle" class="is-warning" size="16"></clr-icon>
</span>
</div>
directive:
scope.hoverIn = function(){
var res = document.getElementsByClassName('remove');
var result = angular.element(res);
if(event.ctrlKey){
result.removeClass('hidden');
result.addClass('current');
}
}
less:
.hidden{
display:none;
}
.current{
display: block;
border: 1px solid red;
}
Based on the question, this is my solution, on hovering the ng-mouseover($event) will track the hovering, then a if condition will check if ctrl key is pressed, you need to pass the $event through the function. Then on mouse leave you need the ng-mouseleave directive to detect this and call another function to hide it again.
Now coming to your question, if you want the span to be intially hidden then just add the class hidden to the span initially.
I have added the below CSS class so that the container does not become very small, to facilitate easy hovering.
.portlet-titlebar {
border: 1px solid black;
min-height: 50px;
}
Here is a working demo, let me know if there are any issues, we can sort it out.
JSFiddle Demo
I have html:
<div style='width:300px; height:40px; float:left;' class='outerDiv'>
<div style='width:200px; height:40px; float:right;' class='innerDiv'>
Some text
</div>
</div>
I try to make small move div.innerDiv by:
$('.innerDiv').animate({ left: '+=200px' });
Basic idea - when div.innerDiv move to border of div.outerDiv, div.outerDiv should hide part of div.innerDiv. I stuck on css styles on div's.
see here : jsfiddle
you need to set a position ( relative,absolute,fixed ) so the css left:200px can work.
css :
.outerDiv {
overflow:hidden;
}
.innerDiv {
position:relative;
}
jq :
$('.innerDiv').animate({ left: '+=200px' });
let me know if this was what you were looking for.
If i understand you correctly, you want to hide the outer div but show the inner div.
You should not hide parent div, because if you hide parent div, child will be hidden.
You can change the background color of the outer div.
js fiddle link
$('.innerDiv').animate({left:'200px'}, {
complete: function () {
$('.outerDiv').addClass('hide');
}
}
);
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
I have a div, which has contenteditable=true. Now, if I enter a longer text, it goes over the bottom. I don't want that. I want the text to stop and block any other text.
This is the solution like I want to have it: http://jsfiddle.net/37Jnn/
The problem here is that this is a textarea and it isn't working with my editable div.
Here is my editable div: http://jsfiddle.net/N4tTp/1/
Any thoughts?
Credit goes to Mohsen but I think this post should have a formal answer:
You're looking for the css style of:
overflow:hidden;
on the div in question. To make the div scrollable, set overflow to:
overflow:auto;
You could save the state of the div (original and after each successful input) and after input events check the div size and restore the state if the size is too big.
The advantage of this solution over the overflow:hidden; one is that the div actually doesn't have the extra content. If someone was to select all the text in it after inputting too much, the extra characters wouldn't be part of the selection.
While it isn't the most elegant way to do it, it does work.
HTML:
<div class="myDiv" contenteditable=true>This text is in the box.... but this is not in the box</div>
CSS:
.myDiv {
background: #acacac;
width:60px;
height: 60px;
overflow: hidden;
}
Javascript:
var text = undefined;
$(function(){
while($('.myDiv').get(0).scrollHeight > $('.myDiv').height()) {
$('.myDiv').text($('.myDiv').text().slice(0,-1));
}
});
$('.myDiv').bind('keydown', function(e) {
text = $('.myDiv').text();
if($('.myDiv').get(0).scrollHeight > $('.myDiv').height() && e.which != 8) {
e.preventDefault();
}
});
$('.myDiv').bind('keyup', function() {
if($('.myDiv').get(0).scrollHeight > $('.myDiv').height()) {
$('.myDiv').text(text);
}
});
I want to achieve hide/show with div's in html but in this way.
Here is my html:
<div id="left"></div>
<div id="middle">
<input type="button" id="button"/>
</div>
<div id="right"></div>
And this is my css:
body
{
height: 100%;
margin: 0;
padding: 0 ;
border: 0 none;
}
#left
{
background-color:#EEEEEE;
height:570px;
width:73.9%;
float:left;
}
#center
{
background-color:#D4EAE4;
color:#535353;
height:570px;
width:15.25%;
float:left;
margin:0;
}
#right
{
background-color:#D4EAE4;
float:left;
width:11%;
height:570px;
margin:0;
}
I want to do that when I click button on div center to hide div right and to expand divleft for the size of the div right and then move div center all the way to the right. I want to hide/show them with horizontal animation, such as from left to right or right to left.
Playing with the words can be tricky so I made a little pictures so you can actually see what am I talking about:
Start phase:
And end phase:
You can see a working demo here... http://jsfiddle.net/miqdad/3WDbz/
or you can see other demo which increment width of first div here .. http://jsfiddle.net/miqdad/3WDbz/1/
I had almost the same question a couple of days ago and maybe it helps you too.
this example uses a checkbox to hide the div. and make the other div 100% width.
javascript, When right div is hidden left div has to be 100% width.
the javascript code from the example:
$(function() {
$("#foo").on("click",function() {
if ($(this).is(':checked')) $('#checked-a').show('fast',function() {
$('#checked-b').css("width","60%");
$('#checked-a').css("width","40%");
}) ;
else $('#checked-a').show('fast',function(){
$('#checked-b').css("width","100%").show();
$('#checked-a').css("width","0%").hide();
});
});
});
and an example:
http://jsfiddle.net/mplungjan/5rdXh/
This is one of the best ways to hide a div element using JavaScript:
<html>
<head>
<script>
function hideDiv() {
document.getElementById("myP2").style.visibility = "hidden";
}
</script>
</head>
<body>
<button onClick="hideDiv()">Hide</button>
<br>
<br>
<p id="myP2">Hello world!</p>
</body>
</html>
Implementing with JQuery is easy. Have a look at this JSFiddle example: http://jsfiddle.net/q39wv/2/
(To all: Normally I wouldn't put only a JSFiddle link here, but this time I think it's worth showing the OP how the whole thing works, with some adjustments to his HTML and CSS).
A Javascript-only solution would be much more difficult to implement.