Using JQuery I'm trying to get a modal box to open after a click is made on an image. I can make the box open using a hard link, but not when the user clicks the image. I've tried using .show but this does'doesn't seem correct?
Example fiddle here http://jsfiddle.net/63VeU/13/
The below code structure using .go etc must remain as thats how the images are identified that they can be clicked on.
I know this is a rookie, question, but I'm unable to find the anser I need anywhere.
$(document).ready(function() {
$('.go img').css('cursor', 'pointer');
$('.go').on('click', 'img', function(e) {
$(this).width(100).height(100).appendTo('#modal-show');
$( "#modal-show" ).show( "slow", function() {
// Animation complete.
});
SaveMyBadge();
return false;
});
});
Sure. Here you got a working demo. I noticed you do some additional stuff like SaveMyBadge(); so updated the fiddle.
<a href="#modal-show" title="Clicking this link shows the modal">
<img class="images BadgeImgOutline responsive-image" src="http://kudosoo.com/GBadges/badge9.jpg" alt="badge-image" />
</a>
$(document).on('click', '.click-badge', function () {
//do other stuff if you need to
SaveMyBadge();
return false;
});
Related
I am using the following jquery to create a drop down toggle effect on my side menu (link: http://wp.gattoweb.com/gattotestfour/)
jQuery(document).ready(function(){
jQuery('.site-navigation ul ul').hide();
if(jQuery('.menu-item-has-children').length > 0) {
jQuery('.menu-item-has-children').click(function(event) {
jQuery(this).addClass('toggled')
if(jQuery('.menu-item-has-children').hasClass('toggled'))
{
jQuery(this).children('ul').toggle();
}
return false;
});
}
});
This seems to be doing the job for the toggle effect but when I try to click on one of the drop down links, the menu disappears and doesn't go to the linked page.
Try this as a full replacement for your script:
$(document).ready(function(){
$( '.sub-menu' ).hide();
$( '.menu-item-has-children' ).click( function() {
var $this = $( this );
$this.find('.sub-menu').slideToggle();
$this.find('.sub-menu').click( function(e) {
e.stopPropagation();
});
});
});
* Edited *
Also, I would add he following to CSS and remove the first line of this script:
.sub-menu {
display: none;
}
If it's not there, it's fine.
Lastly, there is the issue of design decisions. Do you want "Weddings" to trigger the sub-menu or go to the weddings page? The way it is now, it will load the sub-menu for a split second while the weddings page loads, but your visitor will never really have the opportunity to see your engagement portfolio.
Maybe try using a custom link of "Portfolios" with a link URL in the wordpress admin of "#" and move weddings to a child position under that.
Here's a fiddle of the fix: https://jsfiddle.net/cr46nekL/1/
I am extremely new to coding, especially Javascript. I recently found a tutorial that I got to work for an accordion menu, but I am unable to understand how to get the drop downs closed when the page loads. Currently, all of the drop downs are open when the page loads. I tried looking at other solutions but I just don't understand the code fully yet. Thank you so much!
(function($){
$(document).ready(function(){
$('#cssmenu li.active').addClass('open').children('ul').show();
$('#cssmenu li.has-sub>a').on('click', function(){
$(this).removeAttr('href');
var element = $(this).parent('li');
if (element.hasClass('open')) {
element.removeClass('open');
element.find('li').removeClass('open');
element.find('ul').slideUp(200);
}
else {
element.addClass('open');
element.children('ul').slideDown(200);
element.siblings('li').children('ul').slideUp(200);
element.siblings('li').removeClass('open');
element.siblings('li').find('li').removeClass('open');
element.siblings('li').find('ul').slideUp(200);
}
});
});
})(jQuery);
Replace
$('#cssmenu li.active').addClass('open').children('ul').show();
on line 4 with
$('#cssmenu li.active').removeClass('open').children('ul').hide();
You triggered expand action only on click. Just must set the first state on DOM elements.
<div style="display: none;"></div>
Or by default controled "closed" class name instead of "open"
Currently I have this script that allows a button to open and close a menu whilst also changing it's class to do a little animation state change depending on open/close,... simple but effective.....
$(document).ready(function () {
var $navToggle = $('.nav-toggle');
$(".navbtn").click(function () {
if($navToggle.hasClass('active')){
$('#menu').multilevelpushmenu('collapse');
$navToggle.removeClass('active');
$(this).addClass('active');
}
else{
$('#menu').multilevelpushmenu('expand');
$navToggle.addClass('active');
$(this).removeClass('active');
}
});
within the menu is a list with some options (standard) and when one is clicked it performs the following script based on its tag in the list... here's the html and js for that....
html
<li>
<i class="fa fa-briefcase"></i>Who are Musability?
</li>
JS
$('.fa-briefcase').parent().on('click', function () {
$("#colorscreen").remove();
$( '#menu' ).multilevelpushmenu( 'collapse' );
$("body").append('<div id="colorscreen" class="animated"></div>');
$("#colorscreen").addClass("fadeInUpBig");
$('.fadeInUpBig').css('background-color', 'rgba(13,135,22,0.1)');
$(".tile-area-main").css({width: "720px"}).load("content.html");
$('.nav-toggle').removeClass('active');
$(this).addClass('active');
});
all functions work great separately but when i introduce the functions for the button click fa-briefcase it wont allow me to open the menu again why is this ?
... on another note (therefore probably a new question at another time) this code is repetitive for all buttons and wonder if there is a way of standardizing the stuff that is repeated into one big function ? not sure about how i would go about it but it isn't the focus of this question , although any advice greatly recieved.
What does your content.html file contain?
Because if it contains other JavaScript it could be messing with it.
i.e.
Instead of $(".tile-area-main").load("content.html");
Try $(".tile-area-main").load("content.html#div");
Where #div is the div with the contents you want to load() in
EDIT: Just noticed your comments, seems like you've fixed it yourself, but glad my method worked :)
I'm trying to sort the list with this jPList library.
The problem is that the library does it with a select option, that I don't like. I'm trying to use a button to order my list.
Here on my JsFiddle you can see a demo I created, my list is bigger, but similar:
http://jsfiddle.net/Danny182/wsauumra/3/
I'm using the function .html to insert inside the html the code they use on this page to sort the list.
If I put manually inside the #sos div it works, but doing it with the button click and .html doesn't.
Can someone help me?
$('.sortName').click(function () {
$('#sos').html('<div class="hidden" data-control-type="default-sort" data-control-name="sort" data-control-action="sort" data-path=".title" data-order="asc" data-type="text"> clicked </div>');
});
SOLVED:
using this code works, I had to recall the function after clicking the button:
http://jsfiddle.net/Danny182/wsauumra/4/
$('#demo').jplist({
itemsBox: '.list',
itemPath: '.list-item',
panelPath: '.jplist-panel'
});
$('.sortName').click(function () {
$('#sos').html('<div class="hidden" data-control-type="default-sort" data-control-name="sort" data-control-action="sort" data-path=".title" data-order="asc" data-type="text"> clicked </div>');
$('#demo').jplist({
itemsBox: '.list',
itemPath: '.list-item',
panelPath: '.jplist-panel'
});
});
$('#main_div').on('click',".sortName", function() {
$('#sos').html(' clicked ');
});
How do I separate with all the icons still in the div element?
Basically, inside div, I have 4 things to click. The last was made to link for the whole div element click. The middle elements were for specific icon clicks. But now, for specific icon clicks, I want the clicks to connect to their own links. For example, if one clicks github png , it should go to github link, but now the google div link overwrites it. For whatever I click, I only connect to one link, which I do not intend.
Thanks
<script type="text/javascript">
$(document).ready(function(){
$(".Apps").click(function(){
window.open($(this).find("a").last().attr("href"));
return false;
});
});
</script>
<div class="Apps">
<p><b>Web Dev Project 3</b><br><i>(coming soon)</i></p>
<a href="https://github.com/" target="blank">
<img src="https://github.com/apple-touch-icon-114.png" width="30" height="30"/></a>
<a href="http://google.com" target="blank">
<img id="logo" src="http://cclub.slc.engr.wisc.edu/images/Under-Construction.gif" width="30" height="30"/></a>
</div>
There's really no such concept as an <a> being "connected with" a containing element. Instead of that, why not just catch "click" events on the <div> and filter out ones that aren't on the icons:
$('div.Apps').on("click", ":not(a img)", function() {
window.location = "http://google.com";
});
The way your markup is done, it's hard to tell how there'll be screen area that's not icons inside the container, but presumably you've got padding/margins or something.
Exclude the anchors:
$(".Apps").click(function(e){
if (! $(e.target).closest('a').length ) {
window.open($(this).find("a").last().attr("href"));
return false;
}
});
If I were you I would assign different ids for the div and the a link, then inside the a specific link instructions just prevent the default behaviour of the click;
$(´#aLinkId´).on(´click´, function(){
event.preventDefault();
event.stopPropagation();
window.open(whatever here);
});
$(´#aDivId´).on(´click´, function(){
window.open(other whatever here);
});
I this what you are looking for?
http://jsfiddle.net/gespinha/WPsbb/2/
$(document).ready(function () {
$(".Apps").click(function () {
window.open($(this).find("a").last().attr("href"));
return false;
});
$(".Apps > a").click(function () {
window.open($(this).attr("href"));
return false;
});
});