How on click button put animation for busy, show popup with that circle and to block all other ( be dark) while not finish job ( 5 sec ) ? I am new and I don't have any idea how to solve this.
your question is not so clear .
i think you want to do this.
jQuery BlockUI Plugin
If you create an element which overlays the page, items under it won't be clickable. To create the overlay, you could just create a new element and remove it using a timeout:
var overlay = $('<div />').css('opacity',0.5).addClass('overlay').appendTo('body');
$(overlay).append($('<div />').text('Loading '))
window.setTimeout(function(){
$(overlay).remove();
},5000);
as for the CSS of the overlay, you could use something like this:
.overlay{
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
background:#000;
text-align:center;
}
.overlay div{
margin-top:100px;
color:#fff;
font-size:22px;
}
example:
http://jsfiddle.net/niklasvh/BKWjY/
Related
Overall I would like to have something like this jsfiddle.net/DSghU/
Just that the the whole thing is not sliding out to the left. It shall slide out to the right. So that by clicking on the button the button is going completely to the right side.
Edit
I was able to solve the first question: jsfiddle.net/kwoxer/7hne1d0b/
But now I'm looking for a small fix on that. I really dislike that the text is braking when toggled out. How can I set it so that the text is not braking?
Edit 2
The current solution is already cool. But there is just another small issue with the other content. It's moving to the bottom. So how can these toggle elements really be just like an overlay. Here an example: jsfiddle.net/kwoxer/7hne1d0b/4/ I want that the other text(on the left) is staying as it is. And image there is a SVG instead!
Edit 3
Found it out. You need another inner div: jsfiddle.net/kwoxer/7hne1d0b/5/ But I don't think that's a cool solution for this right? If someone finds out something way better, please let me know.
Is this correct. Please have a look at following fiddle:
http://jsfiddle.net/zxwo3ack/16/
basically I just added a few things to the css
#myDiv {
position:relative;
top:50px;
color:Green;
background-color:#eee;
border:2px solid #333;
text-align:justify;
float:right;
width:200px;
overflow:hidden;
}
#button{
position: absolute;
top:80px;
right:0px;
float:right;
}
.other_details{
position:relative;
top:50px;
float:right;
font-weight:bold;
width:200px;
border:1px solid black;
padding:5px;
margin-left:2px;
}
In order to achieve your goal you will need to animate either left position or margin-left. In both cases respectic div should be wrapped with one more container with overflow: hidden on it.
var targetWidth = $('#myDiv').css("margin-left") == "200px" ? "0px" : "200px";
if (!$("#myDiv").is(":visible")) {
$("#myDiv").show();
}
$('#myDiv').animate({marginLeft: targetWidth}, duration, function () {
if ($(this).css("margin-left") == "200px") {
$(this).hide();
} else {
$(this).show();
}
});
Demo: http://jsfiddle.net/7hne1d0b/3/
Solution was pretty simple. Just a bit of CSS needed to be changed and the order and elements in the HTML edited.
This is what I wanted to have: jsfiddle.net/kwoxer/7hne1d0b/2/
I want to make a toggle menu with jquery in this page: http://propertymanagementoh.com/new-short-header-page/ .There is a menu in the right top. I want to make it toggle when someone will click on the "Menu ☰" button then the menu will appear and again when click on the button then that will disappear(like this: http://www.titleonemanagement.com/ ). I have written the following code but it is not working:
<script>
$(document).ready(function(){
$("#block-37").click(function(){
$("#block-38 .menu").toggle();
});
});
</script>
Also used the following css:
#block-38 .menu{
position:fixed;
top:0;
right:0;
width:250px;
overflow:hidden;
z-index:999999;
}
There were two jquery scripts being used, meaning that the jQuery.noConflict(true) was causing an issue with the second set of jquery instructions.
Advised user to combine scripts and it worked!
:)
Additional help as per comment:
A few things need to be done to assist with this.
1) In your css add this:
#block38 .nav-vertical.active {
rgba(0,0,0,.5);
position:fixed;
top:0;
left:0;
z-index:999;
width:100%;
height:100%;
}
#whitewrap.notactive {
margin-left:-235px;
}
2) Change your jquery from
$("#block-37").click(function(){
$("#block-38 .menu").toggle();
});
to:
$("#block-37").click(function(){
$("#block-38 .menu").toggle();
$("#block38 .nav-vertical").toggleClass("active");
$("#whitewrap").toggleClass("notactive");
});
You need to add in another button once the menu is open so that the user can close it.
To do the cross:
Make an image or div and give it the class of "closeNav".
Then change your jquery:
$("#block-37, .closeNav").click(function(){
$("#block-38 .menu").toggle();
$("#block38 .nav-vertical").toggleClass("active");
$("#whitewrap").toggleClass("notactive");
});
So I want to add bullet-like buttons at the bottom of the slideshow, but I can't find a tutorial, so thought you guys could help me out. Here is an example: http://line25.com/wp-content/uploads/2011/jquery-slideshow/demo/index.html
Use a CSS background on your links:
...
CSS:
.someClass {
background-image:url(/images/...); <--path to your image
background-repeat:no-repeat;
display:block;
height:20px;
width:20px; <--- set sizes to match your image.
}
I'm a beginner with javascript and I just can't seem to figure something out.
I'm trying to show an overlay div using jquery. Here's what I have
$("#loginbutton").click(function() {
alert('Ola');
$('#overlay').show();
return false;
});
The accompanying css for the overlay
#overlay {
z-index:1000;
position:fixed;
top:0;
bottom:0;
left:0;
width:100%;
height:100%;
background:#000;
opacity:0.45;
-moz-opacity:0.45;
filter:alpha(opacity=45);
visibility:hidden;
}
Pressing the login button will show the alert but not the div. Has anyone got a clue why this is not working?
Thanks
Change visibility:hidden to display:none
I believe the $.show() function is shorthand for the display:block attribute which would replace your display:none
However, if you have visibility:hidden then it will remain hidden
You could try:
display:none;
instead of
visibility:hidden;
display:none should work fine
you may but this calling for click event when document is completely loaded
so try
$(document).ready(function(){
$("#loginbutton").click(function() {
alert('Ola');
$('#overlay').show();
return false;
});
)};
This is a silly question since I can't find the right keywords to use to get the answer by searching Google, unfortunately.
You know when you click a link and the background dims and becomes unusable but the foreground either has an image or a sign-in box usually? Like the Yahoo mail image displaying method where everything in the background becomes grey transparent and the image itself is just fine?
How is that done? And what is it called?
it's done by creating an overlaying div on the fly in JS, like:
var gab = document.createElement('div');
gab.setAttribute('id', 'OVER');
gab.innerHTML='<div class="overlay"><h1>hello</h1></div>';
document.body.appendChild(gab);
use a CSS class like
#OVER{width:100%; height:100%; left:0;/*IE*/ top:0; text-align:center; z-index:5; position:fixed; background-color:#fff;}
.overlay {width:100%; z-index:6; left:0;/*IE*/ top:30%; font-color:#cdcdcd; font-size:0.8em; text-align:center; position:fixed; background-color:#000;}
dunno how it's called ..
You want to create a "modal box" or "lightbox". Examples:
http://fancybox.net/
http://www.huddletogether.com/projects/lightbox2/
thickbox
eg: http://jquery.com/demo/thickbox/
For images and stuff i use prettyphoto
For text popup Dialog
this is all done with the use of jquery a javascript
You can use smoothbox, along with mootools.