scroll to a link and activate it

scroll to a link and activate it - javascript

I made a website in two column. On the left side there are alls link, on the other side there is the content. When you click on a link the content goes up, and the link also align itself.You can test it here I'm searching for a way to implement a button on the bottom of the left side, that allow to scroll to the top of the document in a special way : il will to activate the first link on top (and scroll to it) and in the same time align the correspondent article of the right side. So far the alignment system is working, except for this link, see the code i'm trying to add bellow.
$('.cd-top').bind('click', function(e) {
e.preventDefault();
var $container = $('.menu-content:first'),
$desc = $('.menu-content:first');
$desc.slideDown('100', function() {
$("#scrollingaside").scrollTo( $container, 500, {offset: { top:-1 } } );// la hauteur d'alignement c'est ici !
$("#scrollingontheright").scrollTo( $("#" + $container.attr('data-id')), 1500);
});
}
});
$('.article').bind('click', function() {
var idproj = $(this).find('span:first').attr('id');
$('.menu-content[data-id="' + idproj + '"]').find('.cd-top').trigger('click');
});

// use on() instead of bind
$('.expander').on('click', function(e) {
e.preventDefault();
var $container = $(this).parents('.menu-content:first'),
$desc = $(this).parents('.menu-content');
// newly added
$('.expander').parents(".current").removeClass('current');
if($container.hasClass('current') == false) {
var others = $('.current');
$container.addClass('current');
$desc.slideDown('100', function() {
$("#scrollingaside").scrollTo( $container, 500, {offset: { top:-1 } } );// la hauteur d'alignement c'est ici !
$("#scrollingontheright").scrollTo( $("#" + $container.attr('data-id')), 1500);
});
}
});
$('.article').bind('click', function() {
var idproj = $(this).find('span:first').attr('id');
$('.menu-content[data-id="' + idproj + '"]').find('.expander').trigger('click');
});
**// new code**
$(".cd-top").on("click",function(){
$('.expander:first').trigger("click");
});

You can just attach a click handler to that button and trigger ("forward") a click event on the top most link from the menu:
$('#top').click(function() {
$('.menu a')[0].click()
})
The selector '.menu a' must be modified to target the correct link.

Related

responsive submenu open on click not working

I have converted my first HTML to WordPress website and have a responsive sub menu which is not opening properly on mobile because obviously there is no hover functionality. I have looked up solutions and have come to nothing as my JavaScript knowledge is non existent therefore copying and pasting code from examples on here is not getting me the result I want to achieve.
The menu I am trying to fix is on the following website:
https://www.piogroup.in/wordpress/
I have 2 parents which are "about" and "products" and they are not clickable links. So far I have tried the following code:
$(document).ready(function(){
$("#menu-item-74").off("click").on("click", function() {
$(".sub-menu").fadeToggle("slow");
});
})
$(document).ready(function(){
$("#menu-item-72").off("click").on("click", function() {
$(".sub-menu").fadeToggle("slow");
});
})
and then added this as well:
var $handle = $('.sub-menu').prev();
var opened = 0;
$handle.on('click', function(e){
if (opened) {
window.location.href = $(this).attr('href');
} else {
e.preventDefault();
e.stopPropagation();
$('.sub-menu').slideToggle();
opened = 1;
}
});
$('html').on('click', function(){
if (opened) {
$('.sub-menu').slideToggle();
opened = 0;
}
});
I am not sure if I am meant to put up any other files but can do so.

#R Alexander if I understand you correctly, Your sub menu is not working on mobile devices. Below code may be help you out.
minWidth = $(window).width();
if(winWidth < 768){
$(".menu-main-menu-container li").click(function(){
$(".menu-main-menu-container li ul").slideToggle();
$(".menu-main-menu-container li ul").parent().siblings().children(".menu-main-menu-container li ul").slideUp();
});
}

I went through your code and there are some logical inconsistencies.
First of all you should change this as follows:
var $handle = $('.sub-menu').prev();
var opened = 0;
$handle.on('click', function(e) {
if (opened) {
window.location.href = $(this).attr('href');
} else {
e.preventDefault();
e.stopPropagation();
$(this).next().slideToggle();
opened = 1;
}
});
This makes the particular clicked element to slideToggle instead of all the .sub-menu elements.
Then to emulate the closing of the drop downs use this:
$('html').on('click', function() {
if (opened) {
$('.sub-menu').slideUp();
opened = 0;
}
});

Why current opened div doesn't close

I have one question about jQuery close system. I have created this DEMO from codepen.io
In this demo you can see there are two div (red and blue). When you click the red div then the .CRtW11 will be an active. But after you click the blue div the .CRtW11 stayed on there; it needs to be inactive. What is the problem there, can anyone tell me ?
JS
// FOR cR
$("body").on("click", ".cR", function(event) {
event.stopPropagation();
var $current = $(this).find('.CRtW11').toggleClass("CRtW11-active");
$('.CRtW11').not($current).removeClass('CRtW11-active');
var $currenta = $(this).find('.ReaC').toggleClass("ReaC-active");
$(".ReaC").not($currenta).removeClass("ReaC-active");
});
$("body").click(function() {
$(".CRtW11").removeClass("CRtW11-active");
$(".ReaC").removeClass("ReaC-active");
});
// FOR Br
$("body").on("click",".Br", function(event) {
event.stopPropagation();
var $current = $(this).find(".BRc").toggleClass("BRc-active");
$(".BRc").not($current).removeClass("BRc-active");
});
$("body").on("click", function(){
$(".BRc").removeClass("BRc-active");
});

$("body").click(function() {
$(".CRtW11").removeClass("CRtW11-active");
$(".ReaC").removeClass("ReaC-active");
});
This function wont work for the red and blue div as their click events are stopped in their respective click functions. So the simple solution will be to add the remove class function in the opposite click functions. i.e.
// FOR cR
$("body").on("click", ".cR", function(event) {
$(".BRc").removeClass("BRc-active");
event.stopPropagation();
var $current = $(this).find('.CRtW11').toggleClass("CRtW11-active");
$('.CRtW11').not($current).removeClass('CRtW11-active');
var $currenta = $(this).find('.ReaC').toggleClass("ReaC-active");
$(".ReaC").not($currenta).removeClass("ReaC-active");
});
$("body").click(function() {
$(".CRtW11").removeClass("CRtW11-active");
$(".ReaC").removeClass("ReaC-active");
});
// FOR Br
$("body").on("click",".Br", function(event) {
$(".CRtW11").removeClass("CRtW11-active");
$(".ReaC").removeClass("ReaC-active");
event.stopPropagation();
var $current = $(this).find(".BRc").toggleClass("BRc-active");
$(".BRc").not($current).removeClass("BRc-active");
});
$("body").on("click", function(){
$(".BRc").removeClass("BRc-active");
});

Click event prevents mouseout from triggering

FINAL EDIT: I found a better solution and more simpler on this codepen. A demo of the working functionality.
EDIT: I found where the bug is coming from you can see an example here. When you click on lets say the About tab and hover over and out on contact the content should be hidden. But you go back to hover over About and out the content stays visible, which is not. How do I ensure the mouseout event is being triggered after clicked?
EDIT 2: So I noticed the unbind() method prevents that. When I remove it I can't seem to get the content area to stay active when clicked as the mouseout method overrides it.
I did some research on this but could not find a solution as to why on hover the removeclass does not work. I have encountered a bug with addClass() and removeClass() functions. The thing is I have those function firing on hover or mouseover/mouseout and on click so it gets a bit confusing. Here is a demo of what I'm working with: JSFiddle.
Full screen for better view.
My JavaScript can be kind of messy but ultimately the way this is suppose to work:
1. If you hover over a dot on the map the content on the left red box should reveal what's relevant to the location as well as a 'tooltip' of the location name. (this part works)
2. You mouse out it's suppose to go back to the list of locations and the tooltip disappears. Almost like a reset.
3. Now if you click on the dot, both the tooltip and the content on the left should remain active. Until you either click on the "Back to the list" link on the red box or hover over the other dots. (this also works)
The bug I encountered is if you click around the list panel and hover over a couple of the location dots after a certain while the hover state stays active when you hover over a couple of the locations (which is not suppose to happen). Everything is suppose to go back the list panel when you hover out of the location dot on the map.
$('a.location').click(function (event) {
var loc = this.id;
if ($('div.panel').hasClass('list')) {
$('div.' + loc).removeClass('current');
$('.list').addClass('current');
}
$('.list').removeClass('current');
$('div.panel.' + loc).addClass('current');
event.preventDefault();
}); //click function
$('.back-list').click(function (e) {
$('.panel').removeClass('current');
$('.list').addClass('current');
$('div.location-title.show').removeClass('show').addClass('hide');
$('div.location-title.view').removeClass('view');
e.preventDefault();
}); //back button
$('ul.locations li > a').hover(function () {
//show location hover
var dot = this.id;
$('div.location-title.' + dot).removeClass('hide').addClass('show');
}, function () {
var dot = this.id;
//hide location hover
$('div.location-title.' + dot).removeClass('show').addClass('hide');
}).click(function (event) {
var dot = this.id;
if (!$('div.location-title.' + dot).hasClass('hide')) {
$('div.location-title.' + dot).addClass('view');
} else {
$('div.location-title.' + dot).removeClass('view');
}
event.preventDefault();
});
$('.map__container > span').on({
mouseover: function () { //mouseover
var loc = $(this).attr('class');
$('.panel').siblings().removeClass('current'); //resets all classes that have current
$('.list').removeClass('current');
$('div.panel.' + loc).addClass('current');
$('div.show').removeClass('show').addClass('hide');
$('div.location-title.' + loc).removeClass('hide').addClass('show');
var asb = $('.location-title').siblings();
$('div.location-title').siblings().removeClass('view');
},
mouseout: function () { //mouseout
var loc = $(this).attr('class');
$('div.' + loc).removeClass('current');
$('div.location-title.' + loc).removeClass('show').addClass('hide');
if (!$('div.' + loc).hasClass('current')) {
$('.list').addClass('current');
} else {
$('.list').addClass('current');
}
},
click: function () {
$(this).off('mouseout');
var loc = $(this).attr('class');
$('div.location-title.show').removeClass('show').addClass('hide');
$('div.location-title.' + loc).removeClass('hide').addClass('show');
}
});
Also if you have better suggestions to clean up my JavaScript I'm all ears. Thanks so much!

If i understand right, you might want to try with the event Mouseleave, and i would use to modularize the function toggleClass:
ToggleClass function Jquery
Mouseleave explanation:
mouseleave: function () { //mouseout
var loc = $(this).attr('class');
$('div.' + loc).removeClass('current');
$('div.location-title.' + loc).removeClass('show').addClass('hide');
if (!$('div.' + loc).hasClass('current')) {
$('.list').addClass('current');
} else {
$('.list').addClass('current');
}
},
I hope this helps you. Salutations!

FINAL EDIT: I found a better solution and more simpler on this codepen. A demo of the working functionality.
My problem was in the code example above the $(this).off('mouseout'); was removing the mouseout when clicked. So if you were to hover back to that dot on the map and mouseout the 'tooltip' would stay active, it won't disappear when you mouseout, which it should disappear. I couldn't find a way to bind it again so the toggleClass() was much better. I been pulling my hair on this!
$('.map__container span').click(function(mapIcon){
mapIcon.preventDefault();
var icon = $(this).attr('class');
var panel = $(this).attr('class');
$('.panel').removeClass('clicked');
$('.location-title').removeClass('clicked');
$('.panel.' + panel).addClass('clicked');
$('.location-title.' + icon).addClass('clicked');
});
//Show bubbles over dots on map
$('.map__container span').hover(function(){
var hoverdot = $(this).attr('class');
$('.location-title.' + hoverdot).toggleClass('selected');
});
//Show bubbles on hover over anchor links
$('a.location').hover(function(){
var hoverlink = this.id;
$('.location-title.' + hoverlink).toggleClass('selected');
});
//Anchor links show panels and bubbles
$('a.location').click(function(e){
e.preventDefault();
var panel = this.id;
var icon = this.id;
$('.panel').removeClass('clicked');
$('.location-title').removeClass('clicked');
$('.panel.' + panel).addClass('clicked');
$('.location-title.' + icon).addClass('clicked');
});
//back button
$('.back-list').click(function(backButton) {
backButton.preventDefault();
$('.panel').removeClass('clicked');
$('.location-title').removeClass('clicked');
$('.list').addClass('clicked');
});

Button to call multiple class anchor click events only calls one then gives unhelping error

I have written a greasemonkey script to customise the way I browse theawesomer.com. I wanted to have a little button I could click next to the post to store the link in a list so I could copy and paste the list into an email and send it to myself for later viewing. I have an email button in another version of the script which automates this fine, I just removed it from this post as it wasn't relevant.
The problem: I have this 'Remove All' button which should, using a jquery class selector, call the click event handler for each of the elements it finds. The click event removes a link in the list and the associated remove link button (not the 'Remove All' button). However it only removes the top item from the list and then throws an error saying 'Component not found' but doesn't point to a line in my code. Can anyone help me find out what is going wrong and how to fix it?
// ==UserScript==
// #name TheAwesomerLaterLink
// #namespace theawesomer
// #include http://theawesomer.com/*
// #include http://www.theawesomer.com/*
// #require https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js
// ==/UserScript==
function addStyle(style)
{
var head = document.getElementsByTagName("head")[0];
var element = head.appendChild(document.createElement('style'));
element.innerHTML = style;
return element;
}
function createLinkInList(link, thisElement) // link = original link/buy anchor, thisElement = this post's new anchor (add button)
{
var removeButton = $(document.createElement('img'))
.attr('src', 'http://alphadesigns.com.au/greasemonkey/removeButton.png')
.attr('title', 'Remove LaterLink')
.attr('alt', 'Remove LaterLink')
.css(
{
width: '16px',
heigth: '16px',
float: 'right'
});
var removeLink = $(document.createElement('a'))
.addClass('removeLink')
.attr('rel', link.parents('.post').attr('id'))
.attr('title', 'Remove LaterLink')
.css('cursor', 'pointer')
.append(removeButton)
.click(function(e)
{
GM_log('start');
e.preventDefault();
// Restore add button if on same page still
if($('#' + $(this).attr('rel')).length > 0)
{
var laterLink = $('#' + $(this).attr('rel')).find('.LaterLink');
laterLink.find('img').attr('src', 'http://alphadesigns.com.au/greasemonkey/addButton.png');
laterLink.unbind('click').click(function(e2)
{
e2.preventDefault();
createLinkInList(link, laterLink);
});
}
// Remove from list of links
$(this).parent().remove();
GM_log('end');
});
var itemLink = $(document.createElement('a'))
.addClass('itemLink')
.text(link.parent().prev('h2').find('a').text())
.attr('href', link.attr('href'));
var span = $(document.createElement('span'))
.append(itemLink)
.append(removeLink)
.append($(document.createElement('br')));
$('#laterLinkList').append(span);
$(thisElement).find('img').attr('src', 'http://alphadesigns.com.au/greasemonkey/disabledButton.png');
$(thisElement).unbind('click');
}
$(document).ready(function()
{
// Create Links
$('.post .topmeta a').each(function()
{
var link = $(this);
if(link.attr('title') == 'Link' || link.attr('title') == 'Buy')
{
// Track inclusion
var insertionPoint = $(this).parent()
.siblings('.metabar')
.find('.rightmetabar > span:last');
// Check if we've already added a link for 'Link' or 'Buy' link
if(insertionPoint.find('.LaterLink').length == 0)
{
newAnchor = $(document.createElement('a'))
.attr('rel', link.attr('href'))
.attr('class', 'LaterLink')
.attr('title', 'LaterLink')
.css('cursor', 'pointer')
.click(function(e)
{
e.preventDefault();
createLinkInList(link, this);
});
newImage = $(document.createElement('img'))
.addClass('icon')
.attr('src', 'http://alphadesigns.com.au/greasemonkey/addButton.png')
.attr('title', 'LaterLink')
.attr('alt', 'LaterLink')
.css(
{
width: '16px',
height: '16px',
marginRight: '3px'
});
newAnchor.append(newImage);
// Put link in metabar next to other share links
insertionPoint.prepend(newAnchor);
}
}
});
// Create List
var panel = $('<div id="actionPanel"><div class="tab"><ul class="tabUL"><li class="left"> </li><li id="toggle"><a id="open" class="open">LinkLater</a><a id="close" style="display: none;" class="close">Close</a></li><li class="right"> </li></ul></div><div id="actionPanelContent"><div class="content clearfix"><input id="removeAll" type="button" value="Remove All" /><div id="laterLinkList" class="left"></div></div></div></div>');
// Attach panel to body
$(document.body).not('iframe body').append(panel);
// Attach 'remove all' function
$('#removeAll').css({margin: '0 15px', float: 'right'})
.click(function(e)
{
e.preventDefault();
$('.removeLink').click();
return false;
});
// Expand Panel
$("#open").click(function(e)
{
e.preventDefault();
$("#actionPanelContent").slideDown("fast");
});
// Collapse Panel
$("#close").click(function(e)
{
e.preventDefault();
$("#actionPanelContent").slideUp("fast");
});
// Switch button from "Open" to "Close" on click
$("#toggle a").click(function(e)
{
e.preventDefault();
$("#toggle a").toggle();
});
// Apply stylesheet to panel
addStyle('#import "http://alphadesigns.com.au/greasemonkey/TheAwesomerLaterLink.css";');
});

Revised code acheives what I want. Instead of removing the 'add link' from the page I simply change the image to look disabled. Then upon removing the links from the list I just change every 'add link' image to look enabled again and empty the list. Seeing as how I'll be the only one using it this fits fine. Sorry to see the multiple click events couldn't be worked out though. For anyone else interested in this script here it is. I added a localStorage utility that enables list persistence through page changes. You'll need to write your own email script if you want to use that feature though.
// ==UserScript==
// #name TheAwesomerLaterLink
// #namespace theawesomer
// #include http://*theawesomer.com/*
// #require https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js
// ==/UserScript==
if(window.top == window.self) // prevent other frames using this script
{
function addStyle(style)
{
var head = document.getElementsByTagName("head")[0];
var element = head.appendChild(document.createElement('style'));
element.innerHTML = style;
return element;
}
function hidePopup()
{
$('.disabledPopup').hide(500, function()
{
$(this).remove();
});
}
function showPopup(message)
{
// if already visible then dont add a new one
if($('.disabledPopup').length == 0)
{
var element = $(document.createElement('div'))
.addClass('disabledPopup')
.html(message)
.css(
{
background: '#555',
position: 'fixed',
top: '10px',
right: '10px',
padding: '10px',
color: 'white',
fontWeight: 'bold'
})
.hide()
.bind('click', function()
{
hidePopup();
})
.appendTo('body')
.show(500, function()
{
setTimeout(hidePopup, 5000);
});
}
}
function createLinkInList(link, thisElement) // link = original link/buy anchor, thisElement = this post's new anchor (add button)
{
var removeButton = $(document.createElement('img'))
.attr('src', 'http://alphadesigns.com.au/greasemonkey/removeButton.png')
.attr('title', 'Remove LaterLink 1')
.attr('alt', 'Remove LaterLink 1')
.css(
{
width: '20px',
heigth: '20px',
float: 'right'
});
var removeLink = $(document.createElement('a'))
.addClass('removeLink')
.attr('rel', link.parents('.post').attr('id'))
.attr('title', 'Remove LaterLink 2')
.css({cursor: 'pointer', marginLeft:'10px'})
.append(removeButton)
.click(function(e)
{
e.preventDefault();
// Restore add button if on same page still
if($('#' + $(this).attr('rel')).length > 0)
{
var laterLink = $('#' + $(this).attr('rel')).find('.LaterLink');
laterLink.find('img').attr('src', 'http://alphadesigns.com.au/greasemonkey/addButton.png');
}
// Remove from list of links
$(this).parent().remove();
});
var itemLink = $(document.createElement('a'))
.addClass('itemLink')
.text(link.parent().prev('h2').find('a').text())
.attr('href', link.attr('href'));
var span = $(document.createElement('span'))
.append(itemLink)
.append(removeLink)
.append($(document.createElement('br')))
.append($(document.createElement('br')));
$('#laterLinkList').append(span);
$(thisElement).find('img').attr('src', 'http://alphadesigns.com.au/greasemonkey/disabledButton.png');
}
$(document).ready(function()
{
// Create Links
$('.post .topmeta a').each(function()
{
var link = $(this);
if(link.attr('title') == 'Link' || link.attr('title') == 'Buy')
{
// Track inclusion
var insertionPoint = $(this).parent()
.siblings('.metabar')
.find('.rightmetabar > span:last');
// Check if we've already added a link for 'Link' or 'Buy' link
if(insertionPoint.find('.LaterLink').length == 0)
{
newAnchor = $(document.createElement('a'))
.attr('rel', link.attr('href'))
.attr('class', 'LaterLink')
.attr('title', 'LaterLink')
.css('cursor', 'pointer')
.click(function(e)
{
e.preventDefault();
createLinkInList(link, this);
});
newImage = $(document.createElement('img'))
.addClass('icon')
.addClass('LaterLinkIcon')
.attr('src', 'http://alphadesigns.com.au/greasemonkey/addButton.png')
.attr('title', 'LaterLink')
.attr('alt', 'LaterLink')
.css(
{
width: '16px',
height: '16px',
marginRight: '3px'
});
newAnchor.append(newImage);
// Put link in metabar next to other share links
insertionPoint.prepend(newAnchor);
}
}
});
// Create List
var panel = $('<div id="actionPanel"><div class="tab"><ul class="tabUL"><li class="left"> </li><li id="toggle"><a id="open" class="open">LinkLater</a><a id="close" style="display: none;" class="close">Close</a></li><li class="right"> </li></ul></div><div id="actionPanelContent"><div class="content clearfix"><div style="float:right;width:145px;text-align:left;"><a id="emailList" style="background:url(http://alphadesigns.com.au/greasemonkey/bt_email.png) no-repeat left 0;cursor:pointer;padding-left:20px;">Email List</a><br/><br/><a id="removeAll" style="background:url(http://alphadesigns.com.au/greasemonkey/bt_close.png) no-repeat left 0;padding-left:20px;cursor:pointer;">Remove All</a></div><div id="laterLinkList" class="left"></div></div></div></div>');
// Attach panel to body
$(document.body).not('iframe body').append(panel);
// Attach 'remove all' function
$('#removeAll').hover(function()
{
$(this).css('background', 'url(http://alphadesigns.com.au/greasemonkey/bt_close.png) no-repeat left -19px');
}, function()
{
$(this).css('background', 'url(http://alphadesigns.com.au/greasemonkey/bt_close.png) no-repeat left 0');
}).click(function(e)
{
e.preventDefault();
$('#laterLinkList').empty();
$('.LaterLinkIcon').attr('src', 'http://alphadesigns.com.au/greasemonkey/addButton.png')
});
$('#emailList').hover(function()
{
$(this).css('background', 'url(http://alphadesigns.com.au/greasemonkey/bt_email.png) no-repeat left -19px');
}, function()
{
$(this).css('background', 'url(http://alphadesigns.com.au/greasemonkey/bt_email.png) no-repeat left 0');
}).click(function(e)
{
e.preventDefault();
//showPopup('email');
$.ajax(
{
url: '<removed>',
type: 'post',
data: {content: $('a.itemLink').serializeArray()},
complete: function(e, XHR, options)
{
if (XHR.status == 403)
{
showPopup('forbidden');
}
},
success: function(response)
{
showPopup(response);
}
});
});
// Expand Panel
$("#open").click(function(e)
{
e.preventDefault();
$("#actionPanelContent").slideDown("fast");
});
// Collapse Panel
$("#close").click(function(e)
{
e.preventDefault();
$("#actionPanelContent").slideUp("fast");
});
// Switch button from "Open" to "Close" on click
$("#toggle a").click(function(e)
{
e.preventDefault();
$("#toggle a").toggle();
});
// Apply stylesheet to panel
addStyle('#import "http://alphadesigns.com.au/greasemonkey/TheAwesomerLaterLink.css";');
// add on unload function so can save the list before user changes pages maybe?
$(unsafeWindow).unload(function()
{
var list = $('#laterLinkList').html();
unsafeWindow.localStorage.setItem('LaterLinks', list);
});
// Preload existing links
var list = unsafeWindow.localStorage.getItem('LaterLinks');
if(list != '')
{
$('#laterLinkList').html($(list));
// setup removeLink events again
$('.removeLink').click(function(e)
{
e.preventDefault();
// Restore add button if on same page still
if($('#' + $(this).attr('rel')).length > 0)
{
var laterLink = $('#' + $(this).attr('rel')).find('.LaterLink');
laterLink.find('img').attr('src', 'http://alphadesigns.com.au/greasemonkey/addButton.png');
}
// Remove from list of links
$(this).parent().remove();
});
}
});
}

I've found the JQuery .click() method to be unreliable when I need some sort of auto-clicking behavior, but the .mousedown() method seems to always work. Unfortunately, the website you are monkeying might not be listening for onmousedown.
It's also a difference in browsers. If I recall correctly, Safari on a PC handles .click() okay, for instance, but not Safari on a Mac.
UPDATE Maybe it's a timing issue - try something like a timeout before you call the click method:
$('.removeLink').each(function () {
window.setTimeout('removeIt("' + this.id + '")',10);
});
function removeIt(id) {
$('#' + id).click();
}

Calling all the removeLink clicks via jQuery is not the same as clicking the links individually. You must pay extra attention to the this scope/object and to the event object.
Ideally, the code should be refactored, but the easy fix -- inline with the question's title -- is to send actual click events. To do that, replace:
$('.removeLink').click();
with:
$('.removeLink').each ( function() {
var clickEvent = document.createEvent ("HTMLEvents");
clickEvent.initEvent ("click", true, true);
this.dispatchEvent (clickEvent);
} );

jQuery not working in IE, works in other browsers

Currently coding a mates portfolio and not to my surprise the code isn't loading in IE!
I'm coding it using standard AJAX, here's the relevant jQuery:
//ajax shtuff
$(window).load(function() {
// Ajax Cache!
$.ajaxSetup ({
cache: false
});
var $loadW = '<div id="whiteLoader" />';
var $loadurl = $('.current').attr('href');
// Initial Page Load
$('#con').prepend($loadW);
$('#main').fadeOut('slow', function() {
$(this).load($loadurl + ' .page', function() {
$(this).parent().find('#whiteLoader').fadeOut('slow', function() {
$(this).parent().find('#main').fadeIn('slow').css({background: 'red'});
$(this).remove();
});
});
});
$('nav ul li a').each(function() {
$(this).click(function(e) {
var $loadW = '<div id="whiteLoader" />';
var $loadurl = $(this).attr('href');
// Prevent default hotlink
e.preventDefault();
// Add the current state
$('*').removeClass('current');
$(this).addClass('current');
// Load the Page
$('#main').fadeOut('slow', function() {
$('#con').prepend($loadW);
$('#main').load($loadurl + ' #main', function() {
$('#whiteLoader').fadeOut('slow', function() {
$('#main').fadeIn('slow');
$(this).remove();
});
});
});
});
});
});
Literally have no idea why this doesnt work lol, here's a link to the live page (I've put the background as red just to show you the area.)
Also the reason the initial page is using the 'this' method is because I was testing it both ways.
http://212.7.200.35/~tfbox/zee/

have you tried
$(document).ready(function() {
// Stuff to do as soon as the DOM is ready;
});
instead of window.load?

Often IE has trouble styling / selecting any of the new HTML5 elements such as section and nav. Try using something like this or simply using a div

Develop Reference

JavaScript is the programming language of the Web.

scroll to a link and activate it - javascript

You can just attach a click handler to that button and trigger ("forward") a click event on the top most link from the menu: $('#top').click(function() { $('.menu a')[0].click() }) The selector '.menu a' must be modified to target the correct link.

Related

responsive submenu open on click not working

Why current opened div doesn't close

Click event prevents mouseout from triggering

Button to call multiple class anchor click events only calls one then gives unhelping error

jQuery not working in IE, works in other browsers

Categories

Resources