I have a client that wants all his pages links in html home website , i.e. when click on any menu, home page, everything, to open chat support box. Normal href should be like this sample to do that but there are a few dozens of links on homepage and he doesn't want to manually remove each link but only to do it with a single code, this way he can simply remove it anytime.
Open the chat
Example of link I need to open chat when click on it:
<li class="list-link"> <i class="tyres ico"></i> anvelope <i class="wlf wlf-arrow-right arrow-link"></i> </li>
Normal href should be like this sample
The code you're showing is not using normal hrefs. It's using techniques that are 25+ years old and was the way we handled clicks before we had any API standards or were concerned with accessibility.
First, don't use hyperlinks solely as JavaScript event hooks. Any visible element on a web page supports a click event, but hyperlinks denote navigation. Those who rely on assistive technologies, like screen readers, can have problems navigating your site when you use hyperlinks, but not for navigation. Instead, just use another inline element (like span) and give that your click event handler.
Second, javascript:.... won't be needed because you'll be doing your JavaScript separate from your HTML (a.k.a. "Separation of Concerns").
Now, to your question. If you simply give any/all elements that should open a chat window when clicked a common CSS class, you can then create very simple code that will find all of them, loop over them, and assign them all the same event handler, which will open the chat. Here's an example:
// Get all the elements that have the "chat" class and put into an array
let chatElements = Array.prototype.slice.call(document.querySelectorAll(".chat"));
// Loop over the array
chatElements.forEach(function(item){
// Assign an event handler
item.addEventListener("click", function(){
console.log("open chat window here");
});
});
.chat { cursor:pointer; color:blue; }
<p class="chat">I will open the chat</p>
<p>I won't open the chat</p>
<div>I will <span class="chat">open the chat</span></div>
<h1 class="chat">I will open the chat</h1>
<h5>I won't open the chat</h5>
$(function(){
$('a').click(function(event) {
event.preventDefault();
jivo_api.open();
});
});
Related
In my web apps are having lots of Popup Window and each window having Toggle buttons are there.
Currently are all open at initial stage, But I need to collape (Closed condition at initial stage).
Problem is all popup pages are having same class name and dynamic id and dynamic attribute. From my end - we cann't use ID and Attribute.
<a class="panel-toggle in" href="#dynamic-value" data-toggle="collapse" aria-expanded="true">
Open/Close
</a>
So I implemented trigger function like this for main layout and later that particular pop html page. Some pages are global.
$(document).ready(function () {
$("body .ui-dialog .panel-toggle").trigger('click');
});
After that above code, on first time load - All are working normal. But i opended second popup from first popup, they collapse all first too.
Later I tried first popup from individual html and second popup is also another individual - but same error. below code for this type
$(document).ready(function () {
$(this).find(".panel-toggle").trigger('click');
});
Any idea... Onpage load, I need trigger for that particular page with global code also individual.
I'm using the GLightbox JS library for a portfolio gallery and want to be able to close the gallery when clicking outside the inner element.
I found other questions of a similar nature, but I'm avoiding jQuery and haven't been able to find a solution that works for this specific use case. Plus it looks like the functionality I want is built in. I'm just trying to access it.
The documentation lists a number of options, and includes what appears to be a function for closing the gallery with something other than the default button.
Their documentation is here: http://glightbox.mcstudios.com.mx/
The markup for the gallery is generated on the fly, and follows this structure:
<div class="goverlay"></div><!-- background overlay -->
<div class="gcontainer"><!-- main container -->
<div id="lightbox-slider">
<div class="gslide">
<div class="gslide-inner-content"><!-- image/text content -->
<img src="img/image.jpg" alt="">
</div>
</div>
</div>
</div>
Based on their documentation there is a method to trigger closing the gallery listed toward the bottom of the page:
// Close the lightbox
myLightbox.close();
I want to be able to click outside of .gslide-inner-content to close the gallery, and this is the basic idea I've come up with so far:
var closeTheGallery = document.getElementsByClassName('.gslide');
closeTheGallery.onclick = function() {
myLightbox.close();
e.stopPropagation();
};
I've tried several iterations of the above code targeting various parent and child elements to see if there's anything I can hook into. So far no luck - any insights would be appreciated - thanks in advance.
The myLightbox.close(); feature didn't seem to do anything regardless of what event or <div> I used, but Doug provided some helpful guidance.
As a workaround, I added an event listener for a click on the .current slide container and set it to trigger another click on the default .gclose button.
// find .current slide item and listen for click
// once click happens, trigger click for the close button
document.addEventListener('click', function (e) {
if (hasClass(e.target, 'current')) {
document.querySelector('.gclose').click();
}
}, false);
It may not be the most elegant solution, but it gets the job done and doesn't interfere with the existing functionality of the gallery.
Posting the code here in case other folks using the GLightbox gallery run into the same thing.
To handle swiping I use the script posted here:
http://padilicious.com/code/touchevents/
It works fine.
Now instead of changing the background (what the original script does), I would like it to grab the link contained within an <a> which has a class, and which is normally a link to the next page, but for mouse events like so:
<a href="mypage02.html" target="_self" class="NextP" title="My Second Page">
and then load the page.
I have many pages, with the same structure, I don't want to manually define the links. I want the js to get hold of the current href contained in the <a> and launch it, when triggered by the swipe. If possible.
Thank you ;-)
From what I understand, you want to look for a
<a href="http://example.com/" class="NextP">
element in a page (an <a> anchor tag with a NextP class), and when the user swipes, visit that link.
To do this, I would
look through your HTML for an a.NextP element, and capture its href attribute.
when the user swipes, set window.location.href to this attribute.
window.onload = function(){
var nextPageUrl = document.querySelector('a.NextP').href;
// just guessing how swiping works, I haven't looked through your library
document.body.onswiperight = function(){
window.location.href = nextPageUrl;
};
};
Of course, you would use the correct method of detecting the swipe.
I can't seem to get the modal window to show any content from another link. I'm quite sure I've used the correct classes to link them together. This is the basic js given from http://www.ericmmartin.com/projects/simplemodal_v101/.
jQuery(function ($) {
// Load dialog on page load
//$('#basic-modal-content').modal();
// Load dialog on click
$(' .basic').click(function (e) {
$('#basic-modal-content').modal();
return false;
});});
I've put the basic class onto
<li><a href="about me/about me.html" class='basic'>about me</a></li>
and in the external html link (about me) I put a div id of
<div id="basic-modal-content">
<p> Darrien is an industrial & product designer based from Toronto. My creative approach falls along the line of biomimicry and human-centric design.
I've recently graduated from the University of Guelph and am currently pursuing my Masters of Industrial Design at Pratt Institute.
Feel free to contact me to just chat and don't forget to look at some of my work.
</p>
I've included my code in this zip (http://www.4shared.com/zip/LGOb7yugba/Darrien_Website_V2.html)
Any help would be much appreciated! :)
You have the following problem:
User click on your link
Click event is fired
Javascript look after some element with ID equals to basic-modal-content
There is no element with this ID
The browser load the about page
What you have to do:
User click on a link (with href='#')
Click event is fired
Use JQuery .load() function to load the html content of about page into a specific div
Call modal with id equals to basic-modal-content
Javascript will look after basic-modal-content and find it
Suppose you have a lightbox, and you want to allow the user to middle-click, which would open a new tab, and the same content that shows-up in the lightbox on left-click is now on a standlone page (complete with header, sidebar, etc).
Anybody have a snippet or technique handy they can share?
Otherwise the technique I was going to try first was just to add a conventional href to the link, then add a click handler that cancels the default action on left click. I think this'll work but I'm not sure so honestly it was easier to pound out a question than to write it up and test it in the 14 browser/os combinations I have to support.
I finally found time to work this out and it was pretty easy:
This is how I made it work using jQuery & FancyBox:
Give your desired link a 'has-overlay' class and give it a custom attribute that will tell it what it should load in the overlay
Login
Be sure you have the overlay code available (this is standard FancyBox stuff)
<div class="hidden" id="loginform"> <!-- Form Goes Here --> </div>
And put this snippet in your on ready event:
$('.has-overlay').bind('click', function(e) {
var overlay = $(this).attr('overlay');
$('').fancybox().trigger('click');
return false;
})
When a user left-clicks, this 'click' handler will be called. It will load the overlay and then return 'false' so the browser won't follow the href in the link.
When a user middle-clicks or right-clicks, the click handler doesn't fire, and it works as a normal link would.