How to prevent jQuery flash from shifting text? - javascript

After performing a process, a flash appears at the top of the screen with some basic information (ex. "Table Added"). When this happens, all the elements in the page get shifted down as the flash drops down from the top. The flash stays for a little bit, then disappears. The text, after the flash is gone, then shifts up to its original position.
How would I get the flash to not shift the elements on the page?
The code for the flash is in jQuery, which I am unfamiliar with. Here's the code:
function controller_jsSetError(type, msg) {
$('#errorMessage').html(msg);
if(type == 'NONE') {
$('#errorMessage').hide();
}
else {
$('#errorMessage').attr('class','ui-state-error ui-corner-all');
$('#errorMessage').show();
}
if(type == 'STATUS') {
$('#errorMessage').attr('class','ui-state-highlight ui-corner-all');
$('#errorMessage').delay(3000).fadeOut('slow');
}
}
Thanks you for your time!

This is more question of the CSS. Your code just shows and hides the flash message. What you need is to position these message boxes absolute.
See this DEMO!
<div class="outerBox">
<span id="errorMessage">ERROR!</span>
<p>Some text</p>
</div>
<button onclick="$('#errorMessage').toggle();">show/hide error message</button>
CSS:
.outerBox {
background:#eee;
padding:20px;
position:relative;
width:100%;
}
#errorMessage {
display:none;
background:red;
padding:30px;
position:absolute;
top:0;
left:0;
width:100%;
}

Try adding a preventDefault() at the beginning of your code- see below.
function controller_jsSetError(type, msg) {
event.preventDefault();
$('#errorMessage').html(msg);
if(type == 'NONE') {
$('#errorMessage').hide();
}
else {
$('#errorMessage').attr('class','ui-state-error ui-corner-all');
$('#errorMessage').show();
}
if(type == 'STATUS') {
$('#errorMessage').attr('class','ui-state-highlight ui-corner-all');
$('#errorMessage').delay(3000).fadeOut('slow');
}
}

Related

Animation doesn't work correctly while scrolling the website

I have a problem with animation, when I scroll the page. You can see it above.
Click "show notice" button and wait about 2 seconds, then the notice will start to hide. Scroll up and down and you will see the notification is jumping up and down. What do I need to do to have notice always in the bottom of website window, even during scrolling?
JSFIDDLE
HTML
<input type="button" value="show notice">
<div id="notice"><p>Notice</p></div>
CSS
body {
height:3000px;
}
#notice {
display:none;
position:absolute;
top:0;
left:0;
width:100px;
height:40px;
background:green;
text-align:center;
font:12px Verdana; color:white;
}
#notice p {
}
JS
function shownotice(){
if(typeof(ntimeout)!='undefined')
clearTimeout(ntimeout);
$('#notice').css({'height':'0px', 'top':h+$(window).scrollTop()+'px'}).show().animate({'height':'+=40px', 'top':'-=40px'}, {duration:300});
ntimeout=setTimeout(function(){hidenotice();}, 2000);
}
function hidenotice(){
$('#notice').animate({'height':'-=40px', 'top':'+=40px'}, {duration:10600, complete:function(){$(this).hide();}});
}
$(function(){
h=window.innerHeight||document.body.clientHeight;
$('#notice').css({'top':h-$('#notice').height()+'px'});
$('input').on('click', function(){shownotice();});
$(window).scroll(function(){$('#notice').css({'top':h-$('#notice').height()+$(window).scrollTop()+'px'})});
});
http://jsfiddle.net/sn1xfwxm/11/
changes to your original fiddle:
#notice {
position:fixed;
removed the display: none, also!
the resulting js is much more simple:
$("#notice").hide(); //hide the notice on document load
$("#show").click(function () {
$("#notice").stop(true, true).slideDown();
});
$("#hide").click(function () {
$("#notice").stop(true, true).slideUp();
});

HTML5 "Lower Lights" dynamic text and incorrect mouse pointer

I'm working on a webpage that has a "Lower Lights" function but the code I have now has a few problems.
The first problem is that for some reason instead of the normal mouse pointer "arrow" it changes to the text select "I" when over the element and its confusing because the user doesn't know its clickable. I've tried changing the tags around it but nothing seems to help.
My second problem is I can't get the text to Dynamically change AND still function. I need it to cycle through "Light: High" > "Light: Medium" > "Light: Low" but with the script I'm using now that seems impossible.
Here is the code that I'm using. Hopefully someone can point out what I'm doing wrong or point me in the right direction.
Notes: The goal of this was to be as simple and light weight HTML5 as possible. If there is an easier, less code, more light weight, option please let me know. Also I'm not opposed to using jQuery if it makes things more simple but I'm completely lost on that front.
If anymore information is needed please let me know.
<html>
<!-- This script handles the "Lower Lights-->
<script>
$(document).ready(function(){
$("#the_lights").fadeTo(1,0);
$("#turnoff").click(function () {
$("#the_lights").css({'display' : 'block'});
$("#the_lights").fadeTo("slow",1);
});
$("#soft").click(function () {
document.getElementById("the_lights").style.display="block";
$("#the_lights").fadeTo("slow",0.8);
});
$("#turnon").click(function () {
document.getElementById("the_lights").style.display="block";
$("#the_lights").fadeTo("slow",0);
});
});
</script>
<style>
#the_lights{
background-color:#000;
height:100%;
width:100%;
position:absolute;
top:0;
left:0;
display:none;
}
#standout{
padding:5px;
background-color:black;
margin-left:auto;
margin-right:auto;
position:relative;
z-index:1000;
}
</style>
<div id ="standout">
<font color="white">
<div id = "turnoff">Lights: Low</div>
<div id = "soft">Lights: Medium</div>
<div id = "turnon">Lights: High</div>
</font>
</div>
<div id="the_lights"></div>
</html>
Is this what you want? Your divs are not links so you need to use the CSS cursor property. cursor:pointer so that it appears clickable. Start out with the first div visible and the other 2 hidden with the hidden CSS class created. I assigned the div id's as numbers. If you actually want divs to use to cycle with, then the code below should work.
example here JSFIDDLE
The jQuery
$(document).ready(function(){
$("#the_lights").fadeTo(1,0);
$(document).on("click","div.lights",function () {
var divId = $(this).attr("id");
$(this).hide();
$("#" + divId).show();
$("#the_lights").css({'display' : 'block'});
if(divId == 1){
$("#2").show();
$("#1").hide();
$("#the_lights").fadeTo("slow",0.8);
}else if(divId == 2){
$("#2").hide();
$("#3").show();
$("#the_lights").fadeTo("slow",1);
}else if(divId == 3){
$("#3").hide();
$("#1").show();
$("#the_lights").fadeTo("slow",0);
}
});
});
The CSS
#the_lights{
background-color:#000;
height:100%;
width:100%;
position:absolute;
top:0;
left:0;
}
#standout{
padding:5px;
background-color:black;
margin-left:auto;
margin-right:auto;
position:relative;
z-index:1000;
}
.lights{
cursor:pointer;
}
.hidden{
display:none;
}
The HTML
<div id ="standout">
<font color="white">
<div class='lights' id = "1">Lights: High</div>
<div class='lights hidden' id = "2">Lights: Medium</div>
<div class='lights hidden' id = "3">Lights: Low</div>
</font>
</div>
<div id="the_lights"></div>
The fiddle
http://jsfiddle.net/gE8VZ/
First for the UI you can change the mouse pointer using CSS cursor property: cursor:pointer; to let the user know it's clickable. Then you can also set an indicator to the current active lights by adding a class to change the styling.
You also don't need to set the display property everytime, "#the_lights" is a <div> element so it has a default block display. And trim down your code to something like this:
$(document).ready(function () {
var lights = $("#the_lights");
lights.fadeTo(1, 0);
$('#standout div').click(function(){
$(this).addClass('active').siblings().removeClass('active');
if($(this).is('#turnoff')){
lights.fadeTo("slow", 1);
}else if($(this).is('#soft')){
lights.fadeTo("slow", 0.8);
}else if($(this).is('#turnon')){
lights.fadeTo("slow", 0);
}
});
});
See this jsfiddle.
I'm not quite sure what you mean by: I need it to cycle through "Light: High" > "Light: Medium" > "Light: Low" but I think a <select> element is a good way to do this. See this jsfiddle.

Div Visibility not working in Firefox, inner image not displaying

[edit]Problem now solved
I have an edit(div with an image) button within another div that contains editable content, my plan is to have the button hidden until the cursor hovers over the content div.
My problem is that if I use display:none; in the CSS and then use a javascript function to show and hide the divButton again then the image does not display in FireFox.
If I use element.style.visibility = "visible"; then FireFox doesn't show the div at all.
Any input would be really appreciated thanks :)
Relevant code:
HTML
<div id="c1ContentSrc" class="widgetContent editable">
#Html.Raw(HttpUtility.HtmlDecode(row.column1Content))
<div id="c1ContentEdit" class="cmsEditButton"><img src="../../Content/images/cmsEdit.png" alt="edit" /></div>
</div>
CSS
.cmsEditButton{
display:none;
position:absolute;
top:37px;
right:8px;
width:16px;
height:16px;
}
Alternate CSS
.cmsEditButton{
visibility:hidden;
position:absolute;
top:37px;
right:8px;
width:16px;
height:16px;
}
javascript function
function showEditButton(id, editId) {
if(editId.style.display == "none"){
if (!id.isContentEditable) {
editId.style.display = "block";
}
}else{
editId.style.display = "none";
}
}
Alternate javascript code
function showEditButton(id, editId) {
if (editId.style.visibility == "hidden" || editId.style.visibility == "") {
if (!id.isContentEditable) {
editId.style.visibility = "visible";
}
}else{
editId.style.visibility = "hidden";
}
}
Function calls
document.getElementById("c1ContentSrc").addEventListener("mouseover", function () {
showEditButton(document.getElementById("c1ContentSrc"), document.getElementById("c1ContentEdit"))
}, false);
document.getElementById("c1ContentSrc").addEventListener("mouseout", function () {
showEditButton(document.getElementById("c1ContentSrc"), document.getElementById("c1ContentEdit"))
}, false);
Problem has been solved now with the following change, moved the image above the razor output, it seemed to be interfering, also removed the unnecessary div
<div id="c1ContentSrc" class="widgetContent editable">
<img id="c1ContentEdit" class="cmsEditButton" title="edit" src="../../Content/images/cmsEdit.png" alt="edit" />
#Html.Raw(HttpUtility.HtmlDecode(row.column1Content))
</div>
Instead of using visibility; you can use
display:none;
display:block;
display:none !important;
style="display:none;" //inline css
Avoid using visibility if you are using display, You can simultaneously play with them and implement the right code...

Scroll to top in a lightbox

I have created a customized menu. See here. On click of this link I have a shadowbox popping up which has a long list of items. Now I want to have a "back to top" anchor link which takes me back to the top of the menu list.
I've set your lightbox with the #box id.
Html
<div id="box">
...
<!-- long content there -->
To Top
</div>
CSS (setting the width of elements)
#box {
position:relative;
width:200px;
height:250px;
overflow:auto;
}
#box #toTop {
position:absolute;
display:none;
left:150px;
top:10px;
}
jQuery
$('#box').bind('scroll', function(e) {
if ($(this).scrollTop() > 100) {
$('#toTop').fadeIn();
$('#toTop').css({'top' : $(this).scrollTop() + 100});
} else {
$('#toTop').fadeOut();
}
});
$(document).on('click', '#toTop', function(e) {
e.preventDefault();
//$('#box').scrollTop(0); //just go to top
$('#box').animate({scrollTop : 0},'slow'); //animate
});
Fiddle
Pretty easy with:
document.querySelector("iframe").contentWindow.scrollTo(0,0);
Now put a button on the page and call that on click. Oh, and omit the height:100% on your body of the iframe, this way you get rid of the second scrollbar.
You can try this out by just pasting the line above and executing it in the console of your browser with your webpage.

how to set image for buttons and hover effect for images

How to set image for button and hover effect for prev and next button images? I do not know how to set image for button, and hover effect for prev and next button images. I need image opacity 0.1 also image button hover disabled,on disabled condition.and image opacity 0.5 on enabled condition also hover effect 0.5. Please help me. See example code: http://jsfiddle.net/YHXFp/50/
html
<div id="prevnexts">
<button class="navButs" id="prevs">Prev</button>
<button class="navButs" id="nexts">Next</button>
</div>
javascript
$(document).ready(function() {
var cnt = 1;
var maxLinkss = 5;
$("#prevs").attr("disabled","disabled");
$("#nexts").attr("enabled","enabled");
$(".navButs").click(function(){
if (this.id=="nexts") {
cnt++;
console.log(" + ",cnt);
} else {
cnt--;
console.log(" - ",cnt);
}
if (cnt<0) cnt=0;
if (cnt==maxLinkss-1) {
$("#nexts").attr("disabled","disabled");
} else {
$("#nexts").removeAttr("disabled");
}
if (cnt==1) {
$("#prevs").attr("disabled","disabled");
} else {
$("#prevs").removeAttr("disabled");
}
});
});
button#nexts{
background:url(your_image_url) no-repeat;
width:50px;
height:50px;
cursor:pointer;
}
button#prevs{
background:url(your_image_url) no-repeat;
width:50px;
height:50px;
cursor:pointer;
}
button#nexts:hover, button#prevs:hover{
opacity:.5;
filter:alpha(opacity=50);
}
DEMO.
​
Putting images is not a good way aas its slows down the loading of the web page. CSS is better. Here's the CSS code and the Working fiddle
(I've chosen arbitrarily colors. Choose your desired colors ).
In case of images just replace background-color with background-image:url(www.example.com/myimage.png).
#prevs{
background-color:#666;
color:#000;
}
#prevs:hover{
background-color:#004534;
}
#prevs:active{
background-color:red;
}
#nexts{
background-color:#999;
color:#000;
}
#nexts:hover{
background-color:#00fcbe;
}
#nexts:active{
background-color:blue;
}

Categories