I have button that shows a password by using fadein and fadeout. However, when the password is an empty string, the div doesn't fade-in.
Html
<div>
<div>********</div>
<div class="password"></div>
<input type="button" class="showPasswordButton" value="Show Password">
</div>
Jquery
$(".showPasswordButton", false).on("click", function () {
var passwordDiv = $(".password");
passwordDiv.text("");
passwordDiv.fadeIn(500).delay(3000).fadeOut(500, function () {
passwordDiv.empty();
});
});
Here is a JSfiddle link to play around with.
If I replace the empty string in passwordDiv.text("") with any value except whitespace, the fade-in will work. I've gotten around the issue by using a Japanese full-width whitespace character. However, I'd like to get this working without an obvious hack. Is there something wrong I'm doing here or a way to get it so passwordDiv will fade-in when the div text is an empty string?
It's working
the matter of fact is that you can't see it. Since by <div> contain nothing, hence it does not take space in the HTML.
You can see your web console and you will find that opacity of the div get changed
JUST try adding the below height and width and you can see the change
.password {
height: 500px;
width: 500px;
background-color: #ff0000; // background of the div, so that you can see the change
}
Other way is not to empty the <div> , just have a blank correct inserted in to the div , so that the <div> take some
passwordDiv.fadeIn(500).delay(3000).fadeOut(500, function () {
passwordDiv.html(' '); // inserting a blank correct , so that actually the div take some space
});
your div is empty , so you can set border or something to see effect .
.password{
width:50px;
height:50px;
border:solid 2px red;
}
DEMO
Here is the jsfiddle i have create for you http://jsfiddle.net/Tushar490/LkxLzhmt/9/
you need to add dimensions(width,height) for the div having "password" class .As you want to see that fading effect for the empty string too , you need set the dimensions as well. What happen is when you give text to that div , the div takes width:auto and height:auto .But when you don't give any text to that div then width:auto and height:auto will show you nothing and that's purely logical .
just a CSS you want , and nothing else :-
.password{
display:none;
width:100px;
height:15px;
}
Hope my answer help you !!
You can also do this for showing empty string fade in-fade out effect :-
$(".showPasswordButton", false).on("click", function () {
var passwordDiv = $(".password");
passwordDiv.html("<br>");
passwordDiv.fadeIn(500).delay(3000).fadeOut(500, function () {
passwordDiv.empty();
});
});
Related
This is probably an easy fix but I can't figure it out. I am trying to style the textbox to be the same width as the listbox.
You just forgot to write ID properly,
CSS
.teststyles input#PairTextbox {
width: 80%; ^---Typo here. IDs are case-sensitive.
}
Look updated jsFiddle
You have a typo it's
.teststyles input#PairTextbox {
width: 80%
}
because PairTextbox !== PairTextBox
LIVE DEMO
you get your id name wrong in your css part.And instead of input ,you should add input[type='text'] as selector,otherwise it will effect all the input elements under the same class name.it will be
.teststyles input[type='text'] #PairTextbox {
width:80%;
}
Or you can add size attribute to your input text field.That will do .
<input id="PairTextbox" type="text" size='38'/>
for edit section:
just cut and paste the desired element and place it at the top of listItem box in your html.you should probably be able to do it by yourself .jsFiddle
I wish to wrap a text with in only two lines inside div of especial width. If text goes beyond the length of two lines then i wish to show elipses. is there any solution to do that using CSS?
I used css property text-overflow:ellipsis. its works only for one line. and also i used -webkit-line-clamp:2.which works well in chrome and safari browsers.
text wrap need to sopport in all the browsers(firefox and IE9).
Please suggest me the solution using css or javacsript?
Thanks in Advance.
One thing i observed..
if text fits in complete two lines its display like this.
testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttestte
testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttestte ...
suppose if text fits half of the two lines like
testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttestte
testtesttesttesttest ...
I am expecting like below:
testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttestte
testtesttest...
I have tried with some modifications didn't succeeded.
You could play around with something like this
p.ellipsis {
position:relative;
line-height:1em;
max-height:2em; /* 2 times the line-height to show 2 lines */
overflow: hidden;
}
p.ellipsis::after {
content:"...";
font-weight:bold;
position:absolute;
top:1em;
right:0;
padding:0 20px 1px 10px;
background: white;
}
See fiddle: http://jsfiddle.net/T7B9c/
Or you could use clamp.js
Edit: To calculate if there is no overflow, you could do:
<p id="ellipsis">lots of text</p>
var $element = $('#ellipsis');
if( $element[0].offsetHeight < $element[0].scrollHeight || $element[0].offsetWidth < $element[0].scrollWidth){
// your element have overflow
$element.addClass('ellipsis');
}
else{
$element.removeClass('ellipsis');
}
Then it will only show the dots if the element has stuff not shown.
Why won't this work?
Using cuepoint.js; you can define cue points within the html5 video.
But; I'd like to; in addition display a #div on click. And ONLY on click.
Once the video resumes; or the image is clicked again; the video resumes and the #div will disappear!!!!
#playdiv1 {
display: none;
}
$('#1').click(function() {
cuepoint.setTime(1)();
$("playdiv1").style.display = "block"; // Why wont this work?
});
This div should show along with the que:
<div id="playdiv1" style="min-height: 300px; min-width: 500px; display: hidden;">
</div>
Library in reference;
http://cuepoint.org/
FULL CODE ~
http://pastebin.com/HG0wVVaK
This doesn't make sense. THE cuepoint time; works..
$('#1').click(function(){
cuepoint.setTime(0)();
But when I add the '$('#playdiv1').show();' right underneath it. It doesn't work?
$('#1').click(function(){
cuepoint.setTime(0)();
$('#playdiv1').show();
});
Your selector is wrong.
Your code, $("playdiv1"), matches elements of type <playdiv1></playdiv1>, which isn't what you want.
The correct code, $("#playdiv1"), selects the element with id playdiv1.
You're also attempting to set the style attribute on the jQuery wrapper around the element. You need to either use the .show method, or access the first matched element.
Either of these will work:
$('#playdiv1').show();
// or
$('#playdiv1')[0].style.display = "block";
Since you have the CSS hiding the playdiv1 you do not need a display declaration inline with your HTML, so remove that -
<div id="playdiv1" style="min-height: 300px; min-width: 500px;">
and change the jQuery to
$('#playdiv1').show();
You can use this...
$('#1').on('click', function() {
cuepoint.setTime(1)();
$("#playdiv1").show();
});
And remove display: hidden; of the style property in the <div> tag...
Switching the order somehow worked;
$('#1').click(function(){
$('#playdiv1').show();
cuepoint.setTime(0)(); // Having this at the bottom; or after the show.
});
So forgive me, I'm just starting learning Javascript, I don't even know if this is possible. I have the following HTML code:
<div class="container">
<div class="topspace">
<div id="picholder" class="pic1">
<div class="picsel" id="picsel1" onclick="imgSel(1)"></div>
<div class="picsel" id="picsel2" onclick="imgSel(2)"></div>
</div>
</div>
</div>
And so what I want to accomplish is by clicking on one of the "picsel" divs (they appear as little squares at the bottom of the picholder div) I can change the backgroundImage used in picholder by changing the class associated with the picholder div. My Javascript appears as such:
function imgSel(n) {
var id1 = "pic" + n;
var id2 = "picsel" + n;
// 'zero out' all the picsel boxes to their default color
document.getElementByClass('picsel').style.backgroundColor="#333";
// change the background-image for picholder
document.getElementById('picholder').style.className=id1;
// change the picsel box that was clicked to white
document.getElementById(id2).style.backgroundColor="#FFF";
}
And my CSS appears as such:
#picholder {width:798px; height:340px; border:1px solid #333; background-color:#333;}
.picsel {width:8px; height:8px; background-color:#333; border:1px solid #333; margin-left:4px; top:340px; position:relative; float:left;}
.picsel:hover {cursor:pointer; background-color:#888;}
.pic1 {background-image:url('data/main001.jpg');}
.pic2 {background-image:url('data/main002.jpg');}
I've run an Alert on it and the variables are being added right, so I guess what I'm wondering is, is it possible to change the className (or is that even a command?). At this point I'm thinking I can't assign a variable to the className=var or getElementById(var), but...well...have at it.
It's currently running at http://www.mdw-art.com/, but in an HTML-based version that doesn't indicate which square is currently being displayed. So I basically want it to do that, but I'm trying to get the boxes to indicate which one is currently displayed and get the code out of the HTML (because I want to apply this same concept to other galleries later).
Yes, add a class name to the selected item and allow the CSS of that class do the work for you instead of changing the inline style with JavaScript. That way you can just remove the class name from the element to un-do the selection.
try .className instead of .style.className
I'm trying to get buttons to appear when hovering over an image. The following works:
jQuery('.show-image').mouseenter(function() {
jQuery('.the-buttons').animate({
opacity: 1
}, 1500);
}).mouseout(function() {
jQuery('.the-buttons').animate({
opacity: 0
}, 1500);
});
However, when moving from the image to the button (which is over the image), the mouseout/mouseenter is triggered, so the buttons fade out then fade back in (the buttons have the same class as the image, otherwise they just stay faded out). How can I prevent this from triggering? I've also tried the above code using jQuery's hover; same results. Here's a detail of the image showing the button with opacity 1 (because I'm over the image):
http://i.stack.imgur.com/egeVq.png
Thanks in advance for any suggestions.
The simplest solution is to put the two in the same parent div and give the parent div the show-image class.
I like to use .hover() to save a few key strokes. (alll hover does is implement .mouseenter() and .mouseleave(), but you don't have to type them out)
Additionally it's very imporant to fade $(this).find(".the-buttons") so that you only change the button in the hovered over div otherwise you would change all of the .the-buttons on the entire page! .find() just looks for descendants.
Finally, .animate() will work, but why not just use .fadeIn() and .fadeOut()?
JS:
jQuery(function() { // <== Doc ready
jQuery(".the-buttons").hide(); // Initially hide all buttons
jQuery('.show-image').hover(function() {
jQuery(this).find('.the-buttons').fadeIn(1500); // use .find() !
}, function() {
jQuery(this).find('.the-buttons').fadeOut(1500); // use .find() !
});
});
Try it out with this jsFiddle
HTML: - Something like this
<div class="show-image">
<img src="http://i.stack.imgur.com/egeVq.png" />
<input class="the-buttons" type="button" value=" Click " />
</div>
CSS: - Something like this. Yours will likely be different.
div {
position: relative;
float:left;
margin:5px;}
div input {
position:absolute;
top:0;
left:0; }
Put the image and the button in the same div, then put the mouseover/mouseout events on the div. Than whether your mouse is over either the button or the image, it will still be over the div.
Also I am not sure if mouseenter(...).mouseout(...) will work. I always use hover(..., ...)