I have been having some trouble in creating a simple notification box. Basically the objective here when I click the submit button input type=button it will display a simple notification box like this.
http://i255.photobucket.com/albums/hh140/testament1234/onclick_zps124dc641.png
I have been told a plugin is not necessary for this kind of thing. I'm still in the process of learning Javascript and would like to ask for some advice on how i can obtain this kind of result.
I have tried using alert but it seems it cannot be styled and I need to use jquery instead.
you can use jquery ui dialog, if you're planing to use jquery. Have look: http://jqueryui.com/dialog/
This will give you a decent walkthrough as well as the code to do what you are looking for without using plugins. These are often called "modal dialogs".
http://javascript.about.com/library/blmodald2.htm
You need to create the box using css and show/hide it using jquery. Once you have the css for the box applied to say a class named .box
.box {
width: 200px;
border:2px solid red;
padding:10px;
}
.box .title {
float:left;
}
.box .close {
float:right;
cursor:pointer;
}
.box .content {
margin-top:10px;
}
.clear {
clear:both;
}
#dialog {
display:none;
}
So now you have the box with the following :
<div class="box" id="dialog">
<div class="title">Almost there</div>
<div class="close">X</div>
<div class="clear"></div>
<div class="content">Thank you for subscribing....</div>
</div>
<button id="showdialog">Show</button> <!--This is trigger for the dialog-->
Now let's keep the box hidden on load
#dialog{
display:none;
}
So we trigger the dialog to be shown when the button is clicked
$("#showdialog").click(function () {
$(".box").show();
});
$(".box .close").click(function () {
$(this).parent().hide(); //When the x button is clicked, the dialog is hidden
})
This will show/hide the dialog in place. If you want to center it, or something, use static positioning
#dialog {
display:none;
position:fixed;
left:20%;
top:20%;
}
JSFiddle demo here: http://jsfiddle.net/zbaNe/
Or you can use a premade dialog plugin like jquery ui dialog(or bootstrap alerts)
Try noty.js , I highly recommend it
Related
I have imported jQuery and Bootstrap in my HTML page already.
Anyhoo, I wanted to toggle a dropdown menu once I click on the little menu image.
Here's how I hide my menu dropdown:
.menu {
height:150px;
width:155px;
background-color:black;
border-radius:5px;
position:absolute;
top:-10px;
left:100%;
padding-left:0;
}
.menu-active {
position:absolute;
top:35px;
left:60%;
}
To make it responsive, I first tried addClass (menuBtn is the button image and I got):
$('.menuBtn').click(function(){
$('.menu').addClass('menu-active');
})
Which works pretty smooth, though it's always ignored if I added time like addClass('menu-active', 1000), but this is a minor problem! I want to make it toggle, so I tried to change it to toggleClass:
$('.menuBtn').click(function(){
$('.menu').toggleClass('menu-active');
})
Even when I intended to bypass toggle and just use if like:
function menuDropdown(){
$('.menuBtn').on('click', function(){
if($('.menu').hasClass('menu-active')){
$('.menu').removeClass('menu-active');
}else{
$('.menu').addClass('menu-active');
});
}
Both of these don't work, the website just ignored them thoroughly.
I know bootstrap does have a simpler way to do this, I just wanna see what can I write on my own.
Here is one way to solve the problem. Create an ID and use that to refer to your menu instead of trying to use the menu class:
HTML:
<div id="toggler" class="menu">Menu Example</div>
<button type="button" class="menuBtn">Click me</button>
JQuery:
$('.menuBtn').click(function () {
$('#toggler').toggleClass('.menu-active menu');
});
Notice how the above toggles both the .menu-active and the .menu class based off of the #toggler ID.
A working example: http://jsfiddle.net/gratiafide/vubsv2pt/12/
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'm creating a wedding website for a family member and want a very simple way for people to enter a password before it reveals the site. It doesn't need to be secure.
I was thinking I could have a white "layer" above the website with a simple password form on it (the website will load underneath it). Then, when the password is entered, the white layer disappears and the website appears.
Can someone help me?
Here is a working example.
HTML
<div class="page">
HERE IS MY PAGE
</div>
<div class="cover">
HERE IS THE COVER
</div>
JavaScript (jQuery)
$('.cover').click(function(){
$(this).fadeOut(1000, function(){
$(this).remove();
});
});
CSS
.page{
background-color:green;
height:200px;
}
.cover{
background-color:yellow;
height:200px;
z-index:200;
position:fixed;
top:0;
left:0;
float:left;
width:100%;
}
See it on JSFiddle.
Uh.. since you've said it doesn't need to be secure (shudders), you'll be able to get away with......
Wrapping everything that pertains to your website in some container, let's say a div, throw a class on it 'main-content'. You have several options as to how you would like to hide it:
CSS display:none;
inline style: display:none;
height:0px;
In addition to your 'main-content', create a div on a similar level and give it an identifier, i.e. class of 'login-content'. Leave this untouched (i.e. visible).
When the DOM loads your login-content should be visible, whereas the main-content won't be.
When the user has 'successfully logged in', revert the styles. i.e. main-content -> display:block;, height:100%, whatever..
With the help of js you can do this:
var password;
var pass1="1234567";
password=prompt('Enter your password',' ');
if (password==pass1) {
$('body').show();
} else {
$('body').hide();
}
This is the source if you want more information:
http://www.pageresource.com/jscript/jpass.htm
I've seen some very similar questions floating around but haven't been able to find the answer I'm looking for. I've already determined a work-around but would like to know the proper way to perform the task.
What I desire is to click the button and have the active state stay persistent. The next click will toggle the state and that is desired. What I really need to know is how to address the uiButton:active state.
HTML:
<input type='button' class='uiButton' id='testbutton' value='testValue'>
CSS:
.uiButton{
background-color: red;
}
.uiButton:active{
background-color:blue;
}
Javascript/jQuery:
$('.uiButton').click(function() {
$(this).toggleClass(//active state);
});
You should create an active class
CSS
.uiButton:active, .active {
background-color:blue;
}
JS
$('.uiButton').click(function() {
$(this).toggleClass("active");
});
:active is a css pseudo-class. You want .active which is the class that's being added to the element.
You can't trigger a css pseudo selector like :active. The only option I know ist to simulate this
.uiButtonActive {
background-color:blue;
}
Check out the working JSFIDDLE DEMO
You want the button to keep the active class after it's clicked? (not sure if you want to allow to be untoggled (red) again?).. Anyways...
CSS:
.uiButton {
background-color: red;
}
.uiButton-active, .uiButton:hover {
background-color: blue;
}
Then....:
$('.uiButton').unbind('click').click(function() {
$(this).attr('class', 'uiButton-active');
});
I have sort of an imagemap, which is basically a lot of absolutely positioned divs, which, when clicked, will show or hide a tooltip. Looks pretty great, apart from the fact, that it doesn't always "work". It sounds silly, but some times I will have to click a couple of times to trigger the event. Maybe I'm just not clicking hard enough? ;)
Markup
<div class="container">
<img src="img.png" />
<div class="trigger"
<div class="tooltip">
Awesome tooltip is awesome!
</div>
</div>
</div>
Style
.container {
width:100px;
height:100px;
position:relative; }
img {
position:relative; }
.trigger {
width:50px;
height:50px;
position:absolute;
top:50px;
left:50px; }
.tooltip {
width:100px;
height:20px;
position:absolute;
top:35px;
left:35px;
display:none; }
Javascript
$(".trigger").toggle(function () {
$(this).children(".tooltip").stop(true, true).fadeTo(200, 0.9);
$(this).siblings(".trigger").children(".tooltip").stop(true, true).fadeOut(200);
}, function () {
$(this).children(".tooltip").fadeOut(200);
});
The markup and CSS is simplified, but imagine I have several tooltips over the image. When I open one tooltip, all others should be closed. I'm guessing this is where things go wrong, but I can't see the error.
In a similar function on the same site, I've semi-dynamically added some IDs, and hide all that is :not(ID), but I just can't believe that should be necessary.
EDIT:
Behold, a Fiddle: http://jsfiddle.net/CfYRv/
change your javascript to something like
$(".trigger").click(function () {
$(".tooltip").fadeOut();
$(this).children(".tooltip").fadeIn();
});
Gah! Need to finish my homework, but long answer short: toggle doesn't work here because you toggle a submenu but then click another. this hides the first submenu, but it's still considered open (it was only hidden). Thus you need to click it twice to open it... I hacked together an alternative but it's not the best code. It'll at least give you an idea what needs done:
http://jsfiddle.net/uj2A4/
$(".trigger").click(function () {
if($(this).hasClass("active"))
$(".tooltip",this).fadeOut(200);
else {
$(this).children(".tooltip").stop(true, true).fadeTo(200, 0.9);
$(this).siblings(".trigger").children(".tooltip").stop(true, true).fadeOut(200);
}
$(this).toggleClass("active");
$(this).siblings(".trigger").removeClass("active");
});
Rather than toggle, let's use click: http://jsfiddle.net/CfYRv/3/
This assigns the "active" tooltip a css class "ttactive". Clicking on "some trigger" will fade out every active tooltip, and activate the one you just clicked. If the one you just clicked was the active one, all it does is fade that one out.
You could probably still use toggle this way:
$(".trigger").click(function () {
$(this).children(".tooltip").stop(true, true).toggle();
$(this).siblings(".trigger").children(".tooltip").stop(true, true).fadeOut(200);
});