I have a interactive image that works perfectly fine in all other browsers than Internet Explorer, but I need it to work there as well...
How can I make this javascript code support newer and older IE browsers?
$(document).on('click', function(e) {
hideDiv(e);
});
$( document ).ready(function( ) {
$( "#ab-1" ).click(function() {
$( "#a-1" ).show( "fade" );
});
$( "#ab-2" ).click(function() {
$( "#a-2" ).show( "fade" );
});
$( "#ab-3" ).click(function() {
$( "#a-3" ).show( "fade" );
});
});
function hideDiv(e) {
if (!$(e.target).is('.ansatt') && !$(e.target).parents().is('.ansatt')) {
$('.ansatt').hide( );
$('.ansatt-info').show () ;
}
}
$(document).on('click', function(e) {
hideDiv(e);
});
Related
I want to execute the below code by creating a simple loop using jQuery, I can also change the classes if needed.
I want to shrink the code as much as possible.
$( ".btn1" ).click(function() {
$( this ).toggleClass( "act-btn1" );
});
$( ".btn2" ).click(function() {
$( this ).toggleClass( "act-btn2" );
});
$( ".btn3" ).click(function() {
$( this ).toggleClass( "act-btn3" );
});
$( ".btn4" ).click(function() {
$( this ).toggleClass( "act-btn4" );
});
$( ".btn5" ).click(function() {
$( this ).toggleClass( "act-btn5" );
});
$( ".btn6" ).click(function() {
$( this ).toggleClass( "act-btn6" );
});
$( ".btn7" ).click(function() {
$( this ).toggleClass( "act-btn7" );
});
$( ".btn8" ).click(function() {
$( this ).toggleClass( "act-btn8" );
});
$( ".btn9" ).click(function() {
$( this ).toggleClass( "act-btn9" );
});
$( ".btn10" ).click(function() {
$( this ).toggleClass( "act-btn10" );
});
$( ".btn11" ).click(function() {
$( this ).toggleClass( "act-btn11" );
});
$( ".btn12" ).click(function() {
$( this ).toggleClass( "act-btn12" );
});
for (let i = 0; i <= 12; i++) {
$( ".btn" + i ).click(function() {
$( this ).toggleClass( "act-btn" + i );
});
}
I don't know about your logic, And number of elements is dynamic or static. Anyway using simple loop like below may solve your problem.
for(let i = 1; i < 13; i++) {
$(`.btn${i}`).click(function() {
$(this).toggleClass(`act-btn${i}`);
});
}
The best way to do this would be to make a general class like .button and add it to every button, thun also make a general action class .btn-action, it would look somthing like this:
$('.button').on('click', function(){
$(this).toggleClass('btn-action');
})
Recently I got some HUGE help on here for a specific issue. I'm about 90% done with it.
I'm having an issue getting jQuery click functions to work on a mobile device.
What's strange, though, in the below code, that the top function (.cartholder > h3) works fine on a mobile device, but the rest of them do not.
(the .fa-shopping-cart is the mobile version of the .cartholder > h3, as it activates through an fa-icon--but it just doesn't work.)
//Dropdown cart in header
$('.cart-holder > h3').click(function(){
if($(this).hasClass('cart-opened')) {
$(this).removeClass('cart-opened').next().slideUp(300);
} else {
$(this).addClass('cart-opened').next().slideDown(300);
}
});
//Dropdown cart in header (mobile)
$('.fa-shopping-cart').click(function(){
if($(this).hasClass('cart-opened')) {
$(this).removeClass('cart-opened').next().slideUp(300);
} else {
$(this).addClass('cart-opened').next().slideDown(300);
}
});
//Popup rating content
$('.star-rating').each(function(){
rate_cont = $(this).attr('title');
$(this).append('<b class="rate_content">' + rate_cont + '</b>');
});
//Hamburger dropdown menu (mobile)
$( ".cross" ).hide();
$( ".hamburger" ).click(function() {
$( ".sf-menu" ).slideToggle( "slow", function() {
$( ".hamburger" ).hide();
$( ".cross" ).show();
});
});
$( ".cross" ).click(function() {
$( ".sf-menu" ).slideToggle( "slow", function() {
$( ".cross" ).hide();
$( ".hamburger" ).show();
});
});
//Search header (mobile)
$( ".fa-search" ).click(function() {
$( "#search-mobile" ).slideToggle( "slow", function() {
});
});
The issue shouldn't be jQuery version or touchevents, because the .cartholder > h3 DOES work on mobile.
Eager to hear back from ya :)
I have a script that loads html content to a div and applies jquery tabs at the same time. However, I want to get JQuery Selectmenu on my select at the same time.
I'm having trouble figuring out how to nest these.
I'll be continuing looking at the API Docs, and tutorials, stackoverflow etc.
BUT, In the meantime, I thought someone could help expedite the process.
This is my script as is:
$(function() {
var work = $( "#display" );
$( "#selector" ).change(function( event ) {
work.load($(this).val(),function(){
$("#textdisplay").tabs();
});
});
});
This script works just like i want it to, but It doesn't get styled with my theme because it's not a selectmenu
I want my select to use selectmenu:
$(function() {
$( "#selector" ).selectmenu();
});
Attempt 1:
$(function() {
var work = $( "#display" );
$( "#selector" ).selectmenu(
$( "#selector" ).change(function( event, ui ) {
work.load($(this).val(),function(){
$("#textdisplay").tabs();
);
});
});
});
Attempt 2:
$(function() {
var work = $( "#display" );
$( "#selector" ).selectmenu({
change: function( event ) {
work.load($(this).val(),function(){
$("#textdisplay").tabs();
});
});
});
});
Attempt 3:
$(function() {
var work = $( "#display" );
$( "#selector" ).selectmenu({
change: function( event, ui ) {
work.load($(this).val(),function(){
$("#textdisplay").tabs();
});
});
});
});
Attempt 4:
This attempt loads the selectmenu theme, but kills functionality
$(function() {
$( "#selector" ).selectmenu();
});
$(function() {
var work = $( "#display" );
$( "#selector" ).change(function( event ) {
work.load($(this).val(),function(){
$("#textdisplay").tabs();
});
});
});
Attempt 5:
$(function() {
var work = $( "#display" );
$( "#selector" ).selectmenu ({
selectmenuchange: function( event, ui ) {
work.load($(this).val(),function(){
$("#textdisplay").tabs();
});
}
});
});
So, i went back to the Jquery Documentation and found the correct syntax to make this work. I also learned a little more about how to use the console tab in developer tools view to track down syntax errors.
$(function() {
var work = $( "#display" );
$( "#selector" ).selectmenu ({
change: function( event, data ){
work.load($(this).val(),function(){
$("#textdisplay").tabs();
});
}
});
});
jQuery(document).ready(function() {
jQuery( "li.post_link_history.current" ).click(function() {
jQuery( "div#rating-anchor" ).css( "display", "none !important" );
});
});
//or
jQuery(document).ready(function() {
if(jQuery('li.post_link_history.current').attr('class')=='current')
{
jQuery('div#rating-anchor').not(jQuery(this)).css('display','none !important');
}
});
How can I "By selecting a class, another div display none in jquery"?
Your display style value is not valid for inline styles
jQuery( "div#rating-anchor" ).css( "display", "none" );//or just call the hide() method
jQuery(document).ready(function() {
jQuery( "li.post_link_history" ).click(function() {
jQuery( "div#rating-anchor" ).hide();
});
//or
jQuery( "li.current" ).click(function() {
jQuery( "div#rating-anchor" ).hide();
});
//or use an common class for "li" ex:"commonli"
jQuery( ".commonli" ).click(function() {
if(jQuery(this).hasClass("current")){
jQuery( "div#rating-anchor" ).hide();
}
});
});
.hide() method will hide the division.
edited... current and post_link_history are different classes..so use any one
There is something wrong with my jQuery script. It kinda works, but when I try to toggle between the classes it works at first.
the script changes classes just like it's supposed to. but when i try to do it again,
I have to click the link and then somewhere else, and then it works again.
I want to be able do repeat the whole procedure over and over without having to click two extra times.
var clickOnSettings = true;
$(".settings_link").click(function () {
event.preventDefault();
if (clickOnSettings) {
$("#coverup").toggleClass("cover1");
$("#settingani").toggleClass("settings1");
clickOnSettings = false;
}
});
$("#coverup").click(function () {
if (!clickOnSettings) {
$("#coverup").toggleClass("cover2");
$("#settingani").toggleClass("settings2");
clickOnSettings = true;
}
});
created a jsfiddle:
http://jsfiddle.net/5dzt1v6f/13/
If you toggle 'cover1', you basically toggle between having and not having 'cover1' on the element. That does not imply that you automatically get cover2 when you remove cover1.
You have to do that yourself. Fortunately, toggleClass has a second parameter that accepts a boolean. This allows you to easily toggle classes on or off based on your conveniently introduced boolean.
Furthermore, this makes the click handler for both elements the same:
var clickOnSettings = false;
$( ".settings_link, #coverup" ).click(function() {
event.preventDefault();
clickOnSettings = ! clickOnSettings;
//Toggle all classes.
$( "#coverup" ).toggleClass( "cover1", clickOnSettings);
$( "#settingani" ).toggleClass( "settings1", clickOnSettings);
$( "#coverup" ).toggleClass( "cover2", !clickOnSettings);
$( "#settingani" ).toggleClass( "settings2", !clickOnSettings);
});
http://jsfiddle.net/5dzt1v6f/20/
Why don't you just use addClass and removeClass for what you want to do.
var clickOnSettings = true;
$( ".settings_link" ).click(function() {
event.preventDefault();
if (clickOnSettings) {
$( "#coverup" ).addClass( "cover1" );
$( "#settingani" ).addClass( "settings1" );
$( "#coverup" ).removeClass( "cover2" );
$( "#settingani" ).removeClass( "settings2" );
clickOnSettings = false;
}
});
$( "#coverup" ).click(function() {
if (!clickOnSettings) {
$( "#coverup" ).addClass( "cover2" );
$( "#settingani" ).addClass( "settings2" );
$( "#coverup" ).removeClass( "cover1" );
$( "#settingani" ).removeClass( "settings1" );
clickOnSettings = true;
}
});
http://jsfiddle.net/5dzt1v6f/15/
I fixed it!
Not the prettiest code. But this worked I needed to have another class for the settingani and not for the coverup. So I had to do it like this:
var clickOnSettings = 1;
$( ".settings_link" ).click(function() {
event.preventDefault();
if (clickOnSettings == 1) {
$( "#settingani" ).removeClass( "settings0" );
$( "#coverup" ).addClass( "cover1" );
$( "#settingani" ).addClass( "settings1" );
clickOnSettings = 3;
}
});
$( ".settings_link" ).click(function() {
event.preventDefault();
if (clickOnSettings == 2) {
$( "#coverup" ).removeClass( "cover2" );
$( "#settingani" ).removeClass( "settings2" );
$( "#coverup" ).addClass( "cover1" );
$( "#settingani" ).addClass( "settings1" );
clickOnSettings = 3;
}
});
$( "#coverup" ).click(function() {
if (clickOnSettings == 3) {
$( "#coverup" ).removeClass( "cover1" );
$( "#settingani" ).removeClass( "settings1" );
$( "#coverup" ).addClass( "cover2" );
$( "#settingani" ).addClass( "settings2" );
clickOnSettings = 2;
}
});
Thanks for all the help! =)