I posted a question about a script but I have another question about another script.
I have two blue buttons at the beginning that turn gray on a roll-over.
Blue becomes (and remains) gray when you click on one of the two buttons.
Both buttons must not be blue both. Each button brings up a form at a time (form contact and form quotation).
I have wrote this and I would to know if I can simplify it ?
How to make the "toggle" function compatible with iDevices (iPad, iPhone...) ?
Thank you in advance.
$(function() {
$("#form-contact").hide();
$("#form-devis").hide();
$("#btn-contact").click(function(){
$(this).toggleClass("btn-form-hover");
$("#form-contact").fadeToggle(500, "linear");
$("#form-devis").hide();
$("#btn-devis").removeClass("btn-form-hover");
});
$("#btn-devis").click(function(){
$(this).toggleClass("btn-form-hover");
$("#form-devis").fadeToggle(500, "linear");
$("#form-contact").hide();
$("#btn-contact").removeClass("btn-form-hover");
});
});
This looks about as simple as you can get for forcing only one button to have the "selected" state. If you need to do this for many elements, see my code below.
Toggle should work on iDevices as long as the jQuery library you included supports it. However, you will not get a hover effect on iDevices since there is no mouse.
Code Example:
If you plan to do this frequently with buttons (rocker switches) where only one element can have the "selected" state you could make a function like this:
CodePen: http://codepen.io/Skrypt/pen/dyCha
HTML
<div class="rockerSwitch myRocker1">
<button class="left">On</button><button class="right">Off</button>
</div>
<div class="rockerSwitch myRocker2">
<button class="left">True</button><button class="right">False</button>
</div>
<div class="rockerSwitch myRocker3">
<button class="left">Option 1</button><button class="right">Option 2</button>
</div>
CSS
.rockerSwitch button {
background-color: #dcffb2;
border: 1px solid #87cf30;
cursor: pointer;
outline: 0;
}
.rockerSwitch button.left {
margin-right: 0px;
border-radius: 5px 0px 0px 5px;
}
.rockerSwitch button.right {
margin-left: 0px;
border-radius: 0px 5px 5px 0px;
}
.rockerSwitch button:hover {
background-color: #fff;
}
.rockerSwitch button.selected {
background-color: #87cf30;
}
JS/jQuery
$(function() {
$('.myRocker1').rockerSwitch();
$('.myRocker2').rockerSwitch();
$('.myRocker3').rockerSwitch();
});
$.fn.rockerSwitch = function() {
var left = $('.left', this);
var right = $('.right', this);
left.on('click', function() {
left.addClass("selected");
right.removeClass("selected");
});
right.on('click', function() {
right.addClass("selected");
left.removeClass("selected");
});
}
Related
The requirement is user can Click on black box to show orange box, and click on orange box to show red box, but the orange box and red box should be hidden
when user click anywhere of the document except the orange box or the
red box itself.
But currently the issue is that we cannot click on orange box to show red box
Would much appreciate if you could help me out, thanks a lot
Demo link: http://plnkr.co/edit/OqlfbmFPKdXx0wDhnLxZ?p=preview
$(function() {
$('#mypop').click(function(e) {
event.stopPropagation();
});
$(document).on('click', '#myclick', function() {
$('#mypop').toggle();
$(document).one('click', function() {
$('#mypop').hide();
});
});
$(document).on('click', '#myclick1', function() {
$('#mypop2').show();
});
$(document).on('click', '#myclick2', function() {
$('#mypop2').show();
});
})()
#mypop {
background-color: orange;
position: absolute;
top: 130px;
left: 50px;
width: 150px;
padding: 15px;
}
.mydiv {
background-color: black;
padding: 30px;
width: 50px;
cursor: pointer;
color: white;
}
#mypop2 {
margin-top: 150px;
background-color: red;
width: 100px;
height: 50px;
padding: 18px;
display: none;
}
#myclick1,
#myclick2 {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myclick" class='mydiv black-box'>
click me!
</div>
<div id="mypop" style="display:none;" class='orange-box'>
<p>hello world</p>
<div id='myclick1'>BUTTON1</div>
<div id='myclick2'>BUTTON2</div>
</div>
<div id="mypop2" class='red-box'>
Hello World!!!
</div>
try this. I think this is what you are excepting but I'm not sure since you keep editing your question.
Demo Link: http://plnkr.co/edit/n7rdgqTwiFrXtpgoX4TQ?p=preview
$('#myclick1').click(function(){
$('#mypop2').show();
});
$('#myclick2').click(function(){
$('#mypop2').show();
});
You have couple of things mixed up.
The main stop-point was the very first event listener
$('#mypop').click(function(e) {
which is incompatible with the rest of listeners
$(document).on('click','#myclick1',function(e){
after I have changed it to
$(document).on('click','#mypop', function(e){
the other listeners have started working.
Second thing is that for embedded elements (parent-child) you need to stop event propagation, otherwise the parent event is triggered as well (which is not desired)
$(document).on('click','#myclick1',function(e){
e.stopPropagation();
:
});
I have also changed the CSS a bit and added class hide to use instead of styles. Toggling this class is what hides and shows an element.
So I'm making a sort of blog posting system or TODO list, however you want to call it.
I want that the following can happen / is possible:
[Working] The user types something in the textarea
[Working] The user clicks on the button.
[Working] A new div will be created with the text of the textarea.
[Working] The textarea will be empty.
[Not Working] The user has got the choice to delete the post by clicking the 'X' on the right side of each '.post' div.
BUT: If I click on the button when there's nothing in the textarea, there appears an empty div, with only an 'X' close button, no background color either. They appear on the same line as the previous message, so you can get a lot of 'X's next to each other.
AND: Clicking the 'X' close button doesn't do anything. No errors in Firefox console.
If it's not clear enough, run this JSFiddle, click the button and I think you'll understand what I mean:
JSFiddle
HTML:
<!DOCTYPE html>
<html>
<head>
<link href="main.css" rel="stylesheet">
<script src="jquery.min.js"></script>
<meta charset="UTF-8">
</head>
<body>
<div id="blog">
<h1>Blog post application</h1>
<div id="post-system">
<textarea id="poster" rows="5" cols="50" placeholder="Update status."></textarea>
<div id="button">Post</div>
<div id="posts">
</div>
</div>
</div>
</body>
</html>
jQuery Script:
<script>
$(document).ready(function () {
$('#button').click(function () {
var text = $('#poster').val();
$('#posts').prepend("<div class='post'>" + text + "<span class='close-post'>×</span></div>");
$('#poster').val('');
});
$('.close-post').click(function () {
('.close-post').parent().hide();
});
});
</script>
CSS:
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
#blog {
background-color: blue;
margin: 50px;
padding: 50px;
text-align: center;
border-radius: 10px;
color: white;
display: block;
}
#poster {
color: default;
resize: none;
border: 1px solid black;
text-decoration: blink;
font-size: 20px;
display: inline-block;
position: relative;
border-radius: 5px;
border: 2px solid black;
padding-left: 10px;
padding-top: 5px;
}
#button {
background-color: #00FFFF;
color: white;
border: 2px solid white;
border-radius: 5px;
cursor: pointer;
width: 50px;
float: left;
}
.post {
background-color: white;
color: blue;
margin-top: 20px;
width: auto;
display: block;
}
.close-post {
margin-right: 10px;
float: right;
color: red;
cursor: pointer;
}
You appear to have two issues:
1) You don't want a post to be created if the textarea is empty
Simple fix . . . check to see if it is empty, before calling the logic to add the new post (and use jQuery's $.trim() to account for only blank spaces):
$('#button').click(function() {
var text = $.trim($('#poster').val());
if (text !== "") {
$('#posts').prepend("<div class='post'>" + text + "<span class='close-post'>×</span></div>");
$('#poster').val('');
}
});
2) The 'X' buttons are not closing the posts
This also should be a pretty easy fix . . . the reason that they are not working is because the 'X' buttons don't exist when the page is loaded so $('.close-post').click(function() { is not binding to them on page load. You will need to delegate that event binding, so that it will apply to the 'X' buttons that are dynamically added after the page is loaded.
Now, not knowing what version of jQuery that you are using (I can't access jsFiddle from work), I'll point you to the right place to figure out the correct way to do it: https://api.jquery.com/on/
If it is jQuery 1.7 or higher, you would do it like this:
$("#posts").on("click", ".close-post", function() {
$(this).parent().hide();
});
If your version is earlier than that, then investigate the jQuery .delegate() and .live() methods to determine which is the right one to use for your code..
Try this:
$(document).ready(function() {
$('#button').click(function(event) {
event.preventDefault();
var text= $('#poster').val();
if (text === '') {
alert('Nothing to post!');
return;
}
$('#posts').prepend("<div class='post'>" + text + "<span class='close-post'>×</span></div>");
$('#poster').val('');
});
$('#posts').on('click', '.close-post', function() {
$(this).closest('.post').fadeOut();
});
});
JSFiddle
The way you are doing this, the user will only ever see what they are posting - if you're trying for a chat type where users talk to each other then you will need to store what is being typed on the server side and refresh the screen using something like ajax
but in response to your question, you need to bind the close click like this:
$( "#posts" ).on( "click", ".close-post", function() {
$(this).parent().hide(); // $(this) is the clicked icon, the way you did it above wouldn't as if it had the dollar, it would close all .close-post parents
});
See the part about delegated events: http://api.jquery.com/on/
I have left panel which slides in as I press the menu button (it is a mobile version). When the left panel slides in, I want it to close when I click anywhere else except the left panel itself. The jquery I made is this:
$(document).ready(function(){
$('.menu').click( function() {
if ($('.sidemenuu').hasClass('hidden')) {
$('.sidemenuu').animate({left:"0%"},255);
$('.sidemenuu').removeClass('hidden');
return true;
}
else {
if($('.sidemenuu').css("left","0")){
alert('jkk');
$('html').click(function() {
$('.sidemenuu').animate({left:"-80%"},255);
});
}
$('.sidemenuu').addClass('hidden');
$('.sidemenuu').animate({left:"-80%"},255);
}
});
$('.close').click(function(){
$('.sidemenuu').animate({left:"-80%"},255).addClass('hidden');
//$('.sidemenuu').addClass('hidden');
});
$('.sidemenuu').click(function(e){
});
});
html:
<div class="sidemenuu hidden">
<div class="close"></div>
<div class="over-y-auto">
<div data-role="content">
<div id="getVerificationSearchList" >
<button onClick="getVerificationSearchList()">Verification Data</button>
</div>
<div id="getNewHomeLoan" >
<button onClick="getNewHomeLoan()">New Home Loan</button>
</div>
<div id="getNewLoan" >
<button onClick="getNewLoan()">New Loan</button>
</div>
<div id="getContactRecording" >
<button onClick="getContactRecording()">Contact Recording</button>
</div>
<div id="getCPU" >
<button onClick="getCPU()">CPU</button>
</div>
<div id="getphotoupload" >
<button onClick="getimageupload()">Photo Upload List</button>
</div>
<div id="getdocumentupload" >
<button onClick="getdocumentupload()">Document Upload List</button>
</div>
<div id="getreceiptupload" >
<button onClick="getreceiptupload()">Receipt List</button>
</div>
</div>
</div>
</div>
css:
.sidemenuu{ background-color: #181818;
height: 100%; left: -40%;
position: relative;
box-shadow: 9px 0 10px #303030;
position: fixed;
border-right: solid 1px #444;
padding: 1%;
width: 75%;
left: -80%;
z-index: 10;}
.over-y-auto{ overflow-y: auto; height: 100%;}
.sidemenuu button{ background-color: #141414;
border-bottom: solid 1px #000 !important;
border-left: 0;
border-right: 0;
border-top: solid 1px #171717 !important;
color: #565656;
height: 55px;
width: 98%;
font-size: 18px;
}
.sidemenuu button:hover{ background-color: #202020; box-shadow: 0 0 7px #000 inset;}
.close { background: url("img/close.png") no-repeat scroll center 5px #252525;
border: solid 1px #333;
border-radius: 4px;
cursor: pointer;
height: 40px;
margin: 0 auto 19px;
padding: 0;
width: 73px;
}
.menu{ cursor: pointer; left: 0;
position: absolute;}
fiddle is here: http://jsfiddle.net/cLJVV/
This is a fairly common and potentially tricky problem. You'd like to bind to any click 'outside' your element, but DOM events don't work that way. Every click is inside something, and that's what's going to receive the event and bubble it up the DOM.
So, the way to solve this is to listen to clicks on the document itself, and check whether those clicks are inside the element you want to detect clicks outside of (your sidebar). If the clicks made it all the way to the document without passing through your element, they are outside. The simplest function to check for that would look like this:
var openSidebar = function(){
$('.sidemenuu').removeClass('hidden').animate({left:"0%"},255);
}
var closeSidebar = function(){
$('.sidemenuu').addClass('hidden').animate({left:"-80%"},255);
}
$('.menu').click( function(event) {
event.stopPropagation();
openSidebar();
});
$(document).click( function(event){
if ( !$(event.target).closest('.sidemenu').length ) {
closeSidebar();
}
});
See updated fiddle here: http://jsfiddle.net/cLJVV/2/
Note one really important thing: in the .menu click function, the first line is calling event.stopPropagation(). This call stops the event from continuing to bubble up to the root of the document.
Recall that the click binding on the document is going to catch all clicks, and any clicks that didn't originate inside your side menu element will call the function to close it. So, if you have an element that is outside and you don't want that element to trigger your sidemenu to close, you need to stop propagation of clicks on that element. In this case, that's what I did to the menu button on your fiddle.
Hope this helps!
Why not use the focusout event handler.
The focusout event is sent to an element when it, or any element inside of it, loses focus. This is distinct from the blur event in that it supports detecting the loss of focus on descendant elements (in other words, it supports event bubbling).
Example:
$('.close').click(function () {
$('.sidemenuu').animate({
left: "-80%"
}, 255).addClass('hidden');
//$('.sidemenuu').addClass('hidden');
});
$('.sidemenuu').focusout()(function () {
$('.sidemenuu').animate({
left: "-80%"
}, 255).addClass('hidden');
//$('.sidemenuu').addClass('hidden');
});
You can also use a separate function for both as they do the same thing.
Example:
$('.close').on( "click", closeSidemenu )
$('.sidemenuu').on( "focusout", closeSidemenu )
function closeSidemenu() {
$('.sidemenuu').animate({
left: "-80%"
}, 255).addClass('hidden');
//$('.sidemenuu').addClass('hidden');
}
Either way is valid, but the second one is easier to maintain, requires less code, and is easier to troubleshoot.
I have a context menu in jquery on Right Click.
But it is somehow not fulfilling my needs.
When i add new div on click and then try to have context menu operation on it, then it is not working.
It is applying operation on original div.
Can someone help me out in getting this problem solved and improving my Jquery or HTMl.
Js fiddle for Context Menu
Thanks
As marck said that there are many mistakes in your code.You used same ID on multiple elements multiple times. Anyway, I created a basic jsfiddle of what you are trying to achieve. You can build on top of that and modify it according to your needs.
Here is the link:
http://jsfiddle.net/PCLwU/
function add(){
//For adding new items.
}
function menu(){
//to show up context menu
}
function menuactions(){
//Define the actions performed when menu option is selected.
}
For different context menu for different list : http://jsfiddle.net/PCLwU/3/
Context menu div
<div id='contextMenu'>
<ul id='items'>
<li id="cutDoc">Cut</li>
<li id="copyDoc">Copy</li>
<li id="pasteDoc">Paste</li>
<li id="deleteDocs">Delete</li>
</ul>
</div>
menu Style
<style>
#items
{
list-style: none;
margin: 5px 0 0 5px;
}
#contextMenu
{
display: none;
position: fixed;
border: 1px solid grey;
width: 150px;
background-color:white;
box-shadow: 2px 2px 1px grey;
}
#items li
{
list-style-type: none;
border-bottom: 1px solid grey;
border-bottom-style: dotted;
padding: 10px;
font-size: 14px;
}
#items :hover
{
background: #0070FF;
color: white;
}
</style>
jQuery Script for applying on area where it will needed which
$("YOur class name").mousedown(function(e){
//to block browsers default right click
if( e.button == 2 ) {
$("#contextMenu").css("left", e.pageX);
$("#contextMenu").css("top", e.pageY);
$("#contextMenu").fadeIn(500, startFocusOut());
}
});
function startFocusOut() {
$(document).on("click", function () {
$("#contextMenu").hide(500);
$(document).off("click");
});
}
This will work fine.
Update:
here is the fiddle demo
I'm trying to enable hover (adding '.add_link_twitter_hover' class) when the checkbox is not selected & disable it (removing the '.add_link_twitter_hover' class) once the checkbox is selected the same way Pinterest does it for Twitter/Facebook checkboxes when a user adds a pin:
I tried this, but it doesn't disable hover (doesn't remove '.add_link_twitter_hover' class) once mouse pointer is away:
var hoverTwitter = "add_link_twitter_hover";
$(postTwitter + " input").click(function(e) {
$(this).parent().removeClass(hoverTwitter);
$(this).parent().toggleClass(activePostTwitter);
});
$("label.add_link_twitter").hover(function(e) {
if($("input.publish_to_twitter").is(":checked")) {
$(this).removeClass(hoverTwitter);
return;
}
$(this).addClass(hoverTwitter);
});
Any idea how to enable hover when the checkbox is not selected & disable it once the checkbox is selected? Thanks in advance!
Here's the jQuery:
var postTwitter = ".add_link_twitter";
var activePostTwitter = "active";
$(postTwitter + " input").click(function(e) {
$(this).parent().toggleClass(activePostTwitter);
});
Here's the html:
<label class="add_link_twitter">
<input type="checkbox" name="publish_to_twitter" class="publish_to_twitter"><span>Share on Twitter</span>
</label>
Here's the css:
.add_link_twitter{
position:absolute;
left:15px;
bottom:16px;
color: #a19486;
border: 2px solid transparent;
border-color: #F0EDE8;
border-radius: 4px;
font-size: 13px;
font-weight: bold;
cursor: pointer;
padding: 7px;
padding-top: 5px;
padding-bottom: 5px;
}
.active {
border-color: #468BD0;
color: #468BD0;
background-color: whiteSmoke;
}
.add_link_twitter_hover
{
color: #A19486;
border: 2px solid transparent;
border-color: #C2B1A2;
border-radius: 4px;
background-color: white;
padding: 7px;
padding-top: 5px;
padding-bottom: 5px;
}
Try this:
$("label.add_link_twitter").hover(function(e) {
if(!$("input.publish_to_twitter").is(":checked"))
$(this).addClass(hoverTwitter);
}, function() {
$(this).removeClass(hoverTwitter);
});
The usual way to use the .hover() method is to supply two functions: the first is called when the mouse moves over the element in question, and the second is called when the mouse moves out.
So what I've done above is in the first function (mouseenter) I've added your class if the checkbox is not checked. In the second function (mouseleave) I just remove the class.
This can be done without any javascript at all. if you expect to always have the class "publish_to_twitter", just separate the two states with pseudoclasses:
.publish_to_twitter:hover{
width:50px;
}
input.publish_to_twitter:checked{
width:500px;
}
I added the input element in the selector to ensure that the checked style took precedence. Just make sure that for every style you set with :hover, you have an equivalent style in :checked.