I am new to javascript and I need help with this simple script.
It is a shopping cart drop down which currently functions when the field is clicked. I want drop down to fade in on mouse over. I tried adding .hover instead of .live and also tried adding mouse in after 'click' but nothing worked. Any help would be highly appreciated. Thanks!
javascript/jQuery
$('#cart > .heading a').live('click', function() {
$('#cart').addClass('active');
$('#cart').load('index.php?route=module/cart #cart > *', function() {$( "#cart .content" ).fadeIn( "slow" );});
$('#cart').live('mouseleave', function() {
$(this).removeClass('active');
$( "#cart .content" ).hide();
});
});
css
#header #cart .content {
clear: both;
display: none;
position: relative;
padding: 8px;
min-width: 300px;
border: 5px solid #D84D7F ;
background: #FFF;
}
#header #cart.active .heading {
}
#header #cart.active .content {
display: block;
}
Use following,Prevent default behavior of href, like click .Use on not live
$('#cart > .heading a').on('hover', function(e) {
e.preventDefault();
$('#cart').addClass('active');
$('#cart').load('index.php?route=module/cart #cart > *', function() {$( "#cart .content" ).fadeIn( "slow" );});
$('#cart').on('mouseleave', function() {
$(this).removeClass('active');
$( "#cart .content" ).hide();
});
});
Related
I have created a box that I want the text to change in when the h3 tag is hovered? What is the easiest way to achieve this?
Here is my html:
<h3>Hover me to find out more</h3>
<div id="next-text">Here is where you find out more.</div>
Here is my css:
h3 {
border: 3px solid hsl(288, 49%, 29%);
border-radius: 20px;
line-height: 40px;
padding: 52px;
text-align: center;
width: 19%;
float: left;
margin-left: 15px;
height: 305px;
}
Also I have multiple h3 tags and divs.
hover event has two function mouseenter and mouseleave
$( "h3" ).hover(
function() {
$( this ).text( "changed text" );
}, function() {
$( this ).text( "Hover me to find out more" );
}
);
You can try like this:
var oldtext = null;
$("h3").hover(
function() {
oldtext = $(this).text();
$(this).text("changed text");
}, function() {
$(this).text(oldtext);
}
);
Refer this jquery hover
You can use JQuery like this https://jsfiddle.net/2Lzo9vfc/184/
JS
$('h3').hover(
function() {
var $this = $(this);
$this.data('originalText', $this.text());
$this.text("Hover text");
},
function() {
var $this = $(this);
$this.text($this.data('originalText'));
}
);
HTML
<h3>Hover me to find out more</h3>
try this code:
$( "h3" ).hover(function() {
$( this ).text("new text");
});
If you want the text content to change use one of the other answers (preferebly #WisdmLabs):
$( "h3" ).hover(
function() {
$( this ).text( "changed text" );
}, function() {
$( this ).text( "Hover me to find out more" );
}
);
if you want the styling to change add a h3:hover to your css.
If you want to using css then try this:
html:
<h3><span>Hello!</span></h3>
css:
h3:hover span {display:none}
h3:hover:before {content:"Reply!"}
or using JS then try this https://jsfiddle.net/2Lzo9vfc/184/
div.project h1, div.project h3, div.project p {
opacity: 0;
transition: 0.8s;
}
div.project:hover h1, div.project:hover h3, div.project:hover p {
opacity: 1;
}
Try follwing using jquery:
$('h3').mouseenter(function(){
$(this).next('div').html('changed text');
})
If you want to get original text back on mouse leave then do like following.
var previous='';
$('h3').mouseenter(function() {
previous=$(this).next('div').html();
$(this).next('div').html('changed text');
})
.mouseleave(function() {
$(this).next('div').html(previous);
});
I have a button onclick event that works fine like here:
// create function to remove "popup-open" classes
// function used in onclick attribute
(function( $ ){
$.fn.popupClose = function() {
$( "body" ).removeClass( "popup-open" )
$( ".overlay_btn" ).removeClass("popup-open");
return this;
};
})( jQuery );
// if a <button> exists
// onclick read button ID value
// add "popup-open" class to span with IDvalue as class, with fadein effect
if ( $( "button.popup" ).length )
{
$("button.popup").click( function()
{
var btnId = $(this).attr('id');
$( "body" ).hide().addClass( "popup-open" ).fadeIn(100);
$( "."+ btnId ).hide().addClass( "popup-open" ).fadeIn(200);
}
);
}
if ( $( "button.link" ).length )
{
$("button.link").click( function()
{
var btnFormAction = $(this).attr('formaction');
var btnTarget = $(this).attr('formtarget');
//alert(btnFormAction);
window.open(btnFormAction, btnTarget);
}
);
}
button {
padding: 10px;
font-size: 1.5rem;
background-color: #d5d5d5;
border: 3px solid #ddd;
margin: 15px;
box-shadow: 0px 0px 15px #888888;
cursor: pointer;
}
button:hover {
box-shadow: 0px 0px 10px #888888;
}
body:after {
content: "";
display: none;
position: fixed; /* could also be absolute */
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10;
background: rgba(0,0,0,0.6);
}
.overlay_btn {
display: none;
padding: 10px;
width: 300px;
height: 200px;
position: fixed;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -150px;
background-color: #fff;
border-radius: 5px;
text-align: center;
z-index: 11; /* 1px higher than the overlay layer */
}
body.popup-open:after, .popup-open {
display: block;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<!--create a button with unique ID* -->
<button id="btn-popup01" class="popup">popup button 1</button>
<!-- create a span with the button#IDvalue as class value-->
<span class="overlay_btn btn-popup01">close
<h3>your content title 1</h3>
<p>your content 1</p>
</span>
<!--create a button with unique ID* -->
<button id="btn-popup02" class="popup">popup button 2</button>
<!-- create a span with the button#IDvalue as class value-->
<span class="overlay_btn btn-popup02">close
<h3>your content title 2</h3>
<p>your content 2</p>
</span>
<!--create a button with unique ID* -->
<button id="btn-link01" class="link" formaction="http://s.emp.re/1KAZEXZ" formtarget="_blank">link button 3</button>
<p>Here, you have a JS-less equivalent, but with much more CSS (LESS): http://codepen.io/maccadb7/pen/nbHEg</p>
</body>
</html>
Using the same code in this project: http://kine.sarabernaert.be/contact/
Button 'Maak Afspraak' gives a popup
on the popup there's a button 'Ga naar aanmelden' that links to a outside link.
I can't get working this link. When click, nothing happens. In my demo setup, same code is working well.
Any hints? Don't see what I'm doing wrong.
Thx!
Replace your .click() method to .on() method and place them inside $(document).ready at the bottom of the page
In your case, instead of if ( $( "button.link" ).length ) you can use something like below.
$("body").on('click', 'button.link', function(){
var btnFormAction = $(this).attr('formaction');
var btnTarget = $(this).attr('formtarget');
window.open(btnFormAction, btnTarget);
});
Overall, your scripts should probably look like this
$(document).ready(function(){
$("body").on("click", "button.popup", function(){
var btnId = $(this).attr('id');
$( "body" ).hide().addClass( "popup-open" ).fadeIn(100);
$( "."+ btnId ).hide().addClass( "popup-open" ).fadeIn(200);
}).on('click', 'button.link', function(){
var btnFormAction = $(this).attr('formaction');
var btnTarget = $(this).attr('formtarget');
window.open(btnFormAction, btnTarget);
});
$.fn.popupClose = function() {
$( "body" ).removeClass( "popup-open" )
$( ".overlay_btn" ).removeClass("popup-open");
return this;
};
});
I tested it on your site and it seems to be working after that. I got redirected to a login page I guess.
Hope this helps.
I have coded with some help a drag and drop program..
Everything works fine, i just need help to implement a dialog box (using JQuery UI 1.10.3) to open instead of default window popup box when button "Generate Report" is clicked.
Please can someone help?
here is http://jsfiddle.net/GRDww/39/
HTML
<body>
<!-- Add your site or application content here -->
<div id="container">
<!--header and nav will go here-->
<section>
<!--drag from div-->
<div class="col1">
<ul id="gallery" class="gallery ui-helper-reset ui-helper-clearfix">
<li class="ui-widget-content ui-corner-tr">
<h5 class="ui-widget-header">Total Sales</h5>
<img src="http://hasankhan.co.uk/ao/img/totalsales.png" alt="Total Sales" width="96" height="72" />
Transfer Across
</li>
<li class="ui-widget-content ui-corner-tr">
<h5 class="ui-widget-header">Availability</h5>
<img src="http://hasankhan.co.uk/ao/img/availability.png" alt="Availability" width="96" height="72" />
Transfer Across
</li>
<li class="ui-widget-content ui-corner-tr">
<h5 class="ui-widget-header">Completed</h5>
<img src="http://hasankhan.co.uk/ao/img/completed.png" alt="Completed Sales" width="96" height="72" />
Transfer Across
</li>
<li class="ui-widget-content ui-corner-tr">
<h5 class="ui-widget-header">Pending</h5>
<img src="http://hasankhan.co.uk/ao/img/pending.png" alt="Pending Sales" width="96" height="72" />
Transfer Across
</li>
</ul>
</div><!--col1-->
<!--drag into div-->
<div class="col2">
<div id="transfer">
<h4 class="ui-widget-header"><span>Drop icons here</span></h4>
</div><!--transfer-->
</div><!--col2-->
</section><!--section-->
<section>
<div class="col3">
<button class="generate">Generate Report</button>
<button class="reset">Reset</button>
</div><!--col3-->
</section>
</div><!--container-->
</body>
JQuery
$(function() {
// there's the gallery and the transfer
var $gallery = $( "#gallery" ),
$transfer = $( "#transfer" );
// let the gallery items be draggable
$( "li", $gallery ).draggable({
cancel: "a.ui-icon", // clicking an icon won't initiate dragging
revert: "invalid", // when not dropped, the item will revert back to its initial position
containment: "document",
helper: "clone",
cursor: "move"
});
// let the transfer be droppable, accepting the gallery items
$transfer.droppable({
accept: "#gallery > li",
activeClass: "ui-state-highlight",
drop: function( event, ui ) {
deleteImage( ui.draggable );
}
});
// let the gallery be droppable as well, accepting items from the transfer
$gallery.droppable({
accept: "#transfer li",
activeClass: "custom-state-active",
drop: function( event, ui ) {
recycleImage( ui.draggable );
}
});
// function for generating info of icon/s in drop box
$('button.generate').click(function() {
var content = $('ul li h5', $transfer).map(function(i, v) {
return $(this).text();
}).get();
alert(content.join(','));
});
//function for resetting the icons back to original positions
$('button.reset').click(function() {
$('ul li', $transfer).each(function() {
recycleImage($(this));
});
});
toggleButtons();
// image deletion function
var recycle_icon = "<a href='link/to/recycle/script/when/we/have/js/off' title='Transfer this icon back' class='ui-icon ui-icon-transfer-e-w'>Transfer this icon back</a>";
function deleteImage( $item ) {
$item.fadeOut(function() {
var $list = $( "ul", $transfer ).length ?
$( "ul", $transfer ) :
$( "<ul class='gallery ui-helper-reset'/>" ).appendTo( $transfer );
$item.find( "a.ui-icon-transferthick-e-w" ).remove();
$item.append( recycle_icon ).appendTo( $list ).fadeIn(function() {
$item
.animate({ width: "48px" })
.find( "img" )
.animate({ height: "36px" }, function() {
toggleButtons();
});
});
});
}
// image recycle function
var transfer_icon = "<a href='link/to/transfer/script/when/we/have/js/off' title='Transfer Across' class='ui-icon ui-icon-transferthick-e-w'>Transfer Across</a>";
function recycleImage( $item ) {
$item.fadeOut(function() {
$item
.find( "a.ui-icon-transfer-e-w" )
.remove()
.end()
.css( "width", "96px")
.append( transfer_icon )
.find( "img" )
.css( "height", "72px" )
.end()
.appendTo( $gallery )
.fadeIn(function() {
toggleButtons();
});
});
}
// display buttons when icon transferred across
function toggleButtons() {
$('div.col3 button').toggle($('> ul > li', $transfer).length > 0);
}
// resolve the icons behavior with event delegation
$( "ul.gallery > li" ).click(function( event ) {
var $item = $( this ),
$target = $( event.target );
if ( $target.is( "a.ui-icon-transferthick-e-w" ) ) {
deleteImage( $item );
} else if ( $target.is( "a.ui-icon-transfer-e-w" ) ) {
recycleImage( $item );
}
return false;
});
});
CSS
#container{width:100%; margin:0 auto; background-color:#999; position:relative;
clear:both;}
header{background:url(../img/header-bg.jpg) no-repeat #fff; height:100%;}
#logo{position:relative; float:left; width:126px; height:107px;}
#slogan{float:right;}
#slogan-image{float:right;}
nav{height:30px; background-color:#a4abb1; clear:both; width:100%; margin:0 auto;
overflow:hidden;}
nav ul{width:800px; margin:0 auto;}
nav ul li{list-style-type:none; float:left; padding:8px 20px; color:#FFF; font-
size:14px; font-weight:lighter; border-left:#FFF solid 1px;}
nav ul li.last{border-right:1px solid #FFF;}
nav ul li:hover{background-color:#333; cursor:pointer;}
nav a{color:#FFF; text-decoration:none;}
section .col1{width: 55%; float:left; background:#dcdcdc; border-radius:5px; margin-
top:40px; min-height:250px;}
section .col2{width: 40%; float:right; background:#dcdcdc; border-radius:5px; margin-
top:40px; padding:1%;}
section .col3{width: 55%; float:right; margin-top:10px; clear:both;}
.gallery.custom-state-active { background: #eee;}
.gallery li { float: left; width: 96px; padding: 0.4em; margin: 0.4em 0.4em;
text-align: center; }
.gallery li h5 { margin: 0 0 0.4em; cursor: move; }
.gallery li a { float: right; }
.gallery li a.ui-icon-zoomin { float: left; }
.gallery li img { width: 100%; cursor: move; }
#transfer { float: right; width: 100%; min-height: 250px; }
#transfer h4 { line-height: 16px; margin: 0 0 0.4em; }
#transfer h4 .ui-icon { float: left; }
#transfer .gallery h5 { display: none; }
button{display:block; margin-top:20px; width:200px;}
JSFiddle is so helpful! I added some HTML for the modal box, CSS to hide it, and javascript to initialize it and link it to the click handler you already had set up for it. Here's the result of those additions.
HTML:
<div id="gen_dialog">
<p class="diag-content"></p>
</div>
CSS:
#gen_dialog {display:none;}
Initialize the dialog:
// set up the generate button's dialog box
$gen_dialog.dialog({
autoOpen:false,
height:140,
'title': 'Generated Report',
modal:true
});
Line added to your button.generate click handler:
$gen_dialog.find('.diag-content').html(content.join(', ')).end().dialog('open');
I have 4 options that, when clicked, the clicked option becomes focused and its background-color/text color change, while all the other revert to the normal states. I have some code where I can change font color, but I can't figure out how to change the div color. I'm also trying to figure out in CSS and with this code how to have one of the options be by default highlighted when the page loads.
Jquery- the last line "($("a")" is the line of code that changes font color; the code above it has to do with a filtering system I have on the page.
$(function () {
var $panels = $( '#image-wrapper .panel' );
$( '#category > div > a' ).on( 'click', function (event) {
event.preventDefault();
var categoryToShow = $( this ).data( 'filter' );
$panels.addClass( 'active' ).filter( '.' + categoryToShow ).removeClass( 'active' );
$("a").addClass("active-color").not(this).removeClass("active-color");
/*$("#category .current-div").addClass("active-bg").not(this).removeClass("active-bg");*/
} );
});
HTML
<div id="category">
<div class="all-div current-div">
<h2>ALL</h2>
</div>
<div class="ed-div current-div">
<h2>EDITORIAL</h2>
</div>
<div class="pr-div current-div">
<h2>PR</h2>
</div>
<div class="cr-div current-div">
<h2>CREATIVE</h2>
</div>
</div>
CSS
#content,
#category {
overflow: hidden;
}
#category div {
float: left;
margin: 40px 0 0 0;
height: 100px;
width: 240px;
background-color: #F5F5F5;
}
#category .all-div {
background-color: #000000;
}
#category .all-div a {
color: #ffffff;
}
.active-color {
color: #000000;
background-color: green;
}
.active-bg {
background-color: green;
}
Well, .on was not working on your selector so i changed it to .live and changed your selector for the backgrounds to .current-div because your a tags need display: block to have a visible background.
check this:
http://jsfiddle.net/A3n7S/15/
$(function () {
var $panels = $( '#image-wrapper .panel' );
$(".current-div").not('.all-div').first().addClass("active-color")
$( '#category > div > a' ).live( 'click', function (event) {
event.preventDefault();
var categoryToShow = $( this ).data( 'filter' );
$panels.addClass( 'active' ).filter( '.' + categoryToShow ).removeClass( 'active' );
$(".current-div").not('.all-div').removeClass("active-color");
$(this).parent().addClass("active-color");
/*$("#category .current-div").addClass("active-bg").not(this).removeClass("active-bg");*/
} );
});
Replace that:
.active-color {
color: #000000;
background-color: green;
}
with:
#category .active-color {
color: #000000;
background-color: green;
}
I am trying to delay or stop the menu from slideUp action when a user hover off the menu by accident and then hovering again. I am trying to prevent the menu from sliding up when a user unintentionally rolls off the hover area. I want the user to hover back within a split second and not have the menu to slide up.
I used the delay function below as this does not prevent the menu from sliding up. Thanks.
$(document).ready(function() {
$('#nav li').hover(
function () {
//show its submenu
$('ul', this).slideDown(250);
},
function () {
//hide its submenu
$('ul', this).delay(1000).slideUp(500);
}
);
});
Demo: http://jsfiddle.net/D3A5g/
Here is a suggestion Nelson posted. It work on jsfiddle but not on my pages. Can anyone tell me what is preventing from working on my page?
Working Demo: http://jsfiddle.net/xwAdG/6/
Below code does not work when I test it. Any ideas why it's not working?
<html>
<head>
<style type="text/css">
#nav {
padding: 40px;
border: solid #999 1px;
}
#nav ul {
margin: 0;
padding: 0;
display: none;
background-color: #CCC;
}
#nav ul li {
margin: 0;
list-style: none;
list-style-type: none;
padding: 5px;
width: 40px;
}
#nav a {
color: black;
text-decoration: none;
padding: 5px;
}
#nav a:hover {
text-decoration: none;
background-color: yellow;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="http://cherne.net/brian/resources/jquery.hoverIntent.js"></script>
<script>
var config = {
over: function () { //onMouseOver callback (REQUIRED)
$('ul', this).slideDown(250);//show its submenu
},
timeout: 500, // milliseconds delay before onMouseOut (default 0)
out: function () { // function = onMouseOut callback (REQUIRED)
$('ul', this).slideUp(500); //hide its submenu
}
};
$('#nav li').hoverIntent(config);
</script>
</head>
<body>
<ul id="nav">
<li >Main
<ul>
<li>AAAAA</li>
<li>BBBBB</li>
<li>CCCCC</li>
<li>DDDDD</li>
<li>FFFFF</li>
</ul>
</li>
</ul>
</body>
</html>
UPDATE: I found out that I needed to wrap the code with $(document).ready. By doing this, it worked in a html page.
<script>
$(document).ready(function() {
var config = {
over: function () { //onMouseOver callback (REQUIRED)
$('ul', this).slideDown(250);//show its submenu
},
timeout: 500, // milliseconds delay before onMouseOut (default 0)
out: function () { // function = onMouseOut callback (REQUIRED)
$('ul', this).slideUp(500); //hide its submenu
}
};
$('#nav li').hoverIntent(config);
});
</script>
I recommend you the hoverIntent plugin for that, I've use it in some projects and very happy so far.
Your posted code would be used with the plugin like this:
var config = {
over: function () { //onMouseOver callback (REQUIRED)
$('ul', '#nav li').slideDown(250);//show its submenu
},
timeout: 0, // milliseconds delay before onMouseOut (default 0)
out: function () { // function = onMouseOut callback (REQUIRED)
$('ul', '#nav li').slideUp(500); //hide its submenu
}
};
$('#nav li').hoverIntent(config);