I'm working on a Shopify project and am not the original developer, who is unavailable, along with an un-minified version of the javascript file included on every page.
The original site has a page displaying a grid of employee headshots. I have been tasked with enhancing by making it such that each headshot has an overlay that displays some additional info and that clicking on either the headshot image OR the overlay (and its contents) will take some additional action.
Each grid item (headshot) essentially looks like this:
<div class="wrap">
<img src="PATH_TO_IMG">
<div class="info">Danny Testeroni</div>
</div>
and my event listener/handler looks like this:
const $item = document.querySelector('.wrap');
$item.addEventListener('click', (e) => {
console.log(e.target);
});
All works as expected.
Clicking anywhere within the grid item, console.logs the image UNLESS you click anywhere on the overlay, in which case, it console.logs the overlay container. This is what I need.
However when I add this to the actual Shopify template (in which this global JavaScript file gets included), i get different results.
Clicking anywhere within the grid item, console.logs the image UNLESS you click anywhere on the overlay, in which case, it console.logs NOTHING.
The only thing I can conclude is that something in the global JavaScript file is canceling the click event at the <img> so it never makes it to the overlay. Is this the case? If so, is there any way to tell where this is happening and possibly overriding it with my new script? And if not, any ideas why clicks on the overlay may not be registering in the actual Shop as opposed to my bare bones prototype, which can be seen in this Codepen?
You can remove the arrow function on your addEventListener handle and use this, to reference the element it was attached to
const $item = document.querySelector('.wrap');
$item.addEventListener('click', function(e) {
console.log(this);
})
<div class="wrap">
<img src="https://cdn.shopify.com/s/files/1/0598/3089/4765/articles/barber-culture_x700.png?v=1646319227">
<div class="info">Danny Testeroni</div>
</div>
Related
I'm having a problem with a href target _blank on my website.
I cannot determine why it is not opening the link in a new tab, in the section: LATEST PROJECTS > Boranito skat and others, in fact, is instead opening the link in the same tab... can someone explore my website and tell me what is happening and how to solve it? I think it does have to be something with the JS but I am not able to find the problem in the Javascript code since I am a javascript rookie and cannot understand properly what the javascript code here does...
from what I have understood due to previous google and StackOverflow research and behavior watching, it is because javascript is handling the event target _blank in a different way, in fact, javascript here is being used for website change( i mean every click you do on the menu, some divs appears, some divs disappears and it is being handled by 3 js classes), already examined the JS files, clicked right-click, used element inspector> elements> event listeners>click event to see which JS files are being triggered while clicking...
see here detailed image
as you can see, two javascript archives are executing while doing the click event:
1: `jquery.pagepiling.min.js. //// 2: animsition.js`
3: scripts.js
so apparently both javascript classes are handling the events: on click, but since I am a newbie in javascript I cannot understand how to handle this or even understand what the JS does to the website ( i am just tinkering with the given template to try to understand it and to customize it better, (and hence, make the target _blank work properly( as exposed before, while clicking the link, it opens the link in the same page) so I come here for some support of you
Here is the code snippet for you to be able to locate easily inside my website the code while using the code explorer in chrome:
<a href="project-detail.html" target="_blank" class="project-box">
<div class="project-box-inner">
<h5>Boranito<br>Skat</h5>
<div class="project-category">House Design</div>
</div>
</a>
however, will leave the javascript source files here since I am requested to give all possible details here to avoid users being in the need of accessing , here are all the 3 javascript classes handling all the template events which I don't know what they do:
(since I am not able to attach the source code of the javascript classes, I will attach a link for each js file so you could check it, thanks in forward.....
Thank you in advance.
Problem
Your script (scripts.js) on line 13 toggle animsition's feature for links: linkElement: "a.project-box". This will add an handler to every a element with a project-box class. The handler is the following code (I've commented for your understanding):
function(event) {
event.preventDefault(); // prevent the default behavior for links (prevent the behavior you want)
var $self = $(this);
var url = $self.attr('href'); // get the url of the link
if (event.which === 2 || event.metaKey || event.shiftKey || navigator.platform.toUpperCase().indexOf('WIN') !== -1 && event.ctrlKey) {
// open the link in a new tab ONLY IF I clicked on it with the middle mouse button or with Ctrl/Cmd pressed
window.open(url, '_blank');
} else {
// Else do the animation and open the link in the same tab
__.out.call(_this, $self, url);
}
}
Fix
To fix your problem, you can either
Change the way you setup Animsition, be aware that it can modify other links/behaviors in your site
Change the class of your link so it is not matched as the linkElement of your Animsition's setup. For example: remove the class of the a element (it will affect the styling) and you will see that the link opens in a new tab.
Appendix
You can find the handler's code in the devtools -> your link element -> handlers -> click.
Scenario: user profile. I would like to be able to display a user name with a popover that displays a limited amount of information from the user profile. So far, I have that part working. I can build it on the fly and have it do what I need. The popover works perfectly.
What I would also like to do is have the user be able to click on the user name and bring up a Bootstrap modal form with more information about the user (if provided). The first problem I am seeing is that it appears the data-toggle attribute can only have a single setting:
echo '' . $user_row['user_name'] . '';
In that example, if I add the modal to the data-toggle attribute it doesn't seem to do me much good.
I have discovered by tinkering (and that is why the class 'userprof' in the code above), that a JavaScript click event can be triggered (right now all I'm doing is a basic JS alert dialog to test), but from there I would want to load the modal. I am not sure if I can make it all work.
I have a set of functions I've used successfully for another modal (calling this one 'userModal') that I got some help from someone here a while back with -- is it possible to call that from the click event?
// code to open the modal with the caption and description:
$('#userModal').on('show.bs.modal', function (event)
{
var button = $(event.relatedTarget); // Button that triggered the modal
var title = button.data('title'); // Extract info from data-* attributes
var body = button.data('body'); // Extract info from data-* attributes
var modal = $(this);
modal.find('.modal-title').text( title );
modal.find('.modal-body').append( body );
});
// when modal closes, clear out the body:
$('#userModal').on('hidden.bs.modal', function ()
{
$(this).find(".modal-body").text('');
});
Since these are "anonymous" functions I am not sure I can call them ... feeling a bit lost in the code here. Any help pointing me in the right direction would be great. I'd even be willing to consider a different idea, but I would like this kind of functionality (hover and click) for this situation and possibly something else. Thanks!
You're listening for the modal to show itself, when the DOM is showing the modal.
try using something like this, and use a button or a link with data-toggle="modal"
$(document).on('hidden.bs.modal', '#userModal', function ()
{
$(this).find(".modal-body").text('');
});
for reference https://jsfiddle.net/y063mu4t/1/
You can try:
$(document).on('click', 'a.userprof', function(){
$('#userModal').modal('show');
});
To make your callback function work, you need to add according data-* attribute to each of the <a> tag.
Really need some JQuery help here. I'm about to launch my laptop out the window. I have come a long way with this piece of code an I think I am almost there but I am stuck on the last hurdle.
I am only going to include the pertinent pieces of code here because it is a very large piece.
I have a navigation menu for a mock solar system. Here is the link to the larger external piece if you want to see the whole thing. http://jsbin.com/zagiko/1/edit (please note this uses mostly CSS3).
I have a nav menu for the piece and when you click on the values in the nav menu the current script assigns a class of active. That all works perfectly. I built in a button to test the active state on click and the state changes are working. But I need it to respond to the state change on hover. I am not a JQuery person; I am learning. It almost seems like the hover isn't working because it is responding to the data loaded when the page loads instead of responding in real time. But I am just guessing.
What I need is an if statement that will respond to the live data (not on page load or when the document is ready). The if statement should basically say if this div is active then this other div can appear on hover. But if this div is not active then it cannot appear.
The current if statement I wrote is
if($("a.active").is('.uranus')){
$('#uranus .infos').hover(
function () {
$("#descriptionsp").fadeIn("2000");
})
};
The current script that runs when the site loads that sets up the menus is:
$(window).load(function(){
var e=$("body"),
t=$("#universe"),
n=$("#solar-system"),
r=function() {
e.removeClass("view-2D opening").addClass("view-3D").delay(2e3).queue(function() {
$(this).removeClass("hide-UI").addClass("set-speed");
$(this).dequeue()})
},
i=function(e){
t.removeClass().addClass(e)
};
$("#toggle-data").click(function(t){
e.toggleClass("data-open data-close");
t.preventDefault()
});
$("#toggle-controls").click(function(t){
e.toggleClass("controls-open controls-close");
t.preventDefault()
});
$("#data a").click(function(e){
var t=$(this).attr("class");
n.removeClass().addClass(t);
$(this).parent().find("a").removeClass("active");
$(this).addClass("active");
e.preventDefault()
});
Really need you help. Thanks in advance!
Right now, your block of code is only being checked when the javascript is loaded. At this time, the .uranus element is probably not active, so nothing will happen.
First of all, you want to move this block inside of document ready, otherwise your elements such as .uranus might not even exist yet.
Your logic is very close, but you need to move the if statement inside of the hover function like this:
$('#uranus .infos').hover(
function () {
if($("a.active").is('.uranus')){
$("#descriptionsp").fadeIn("2000");
}
});
This way, every time you hover on #uranus .infos, it will only execute the code if the .uranus is also .active
I have a tab container with tabs, that depending on what tab is selected, i would like a function to run. I have already created the function in Java Script, that will either Hide or Display a window. The function works fine. How do i tell the tabs to run this function? In the code below, i show in the "Contents" of a tab, a function intitled "hidediv". I also have a function called "showdiv". I want to remove it from the contents, and have it run automatically when the tab is selected. any suggestions? I do not want it to affect the contents of the tab at all.
Thank you!
<div dojoType="dijit.layout.ContentPane" title="Setup">
Hide div
</div>
This is well described in the reference guide.
Basically, if your TabContainer has id "myTabs", you can do:
dojo.subscribe("myTabs-selectChild", function(selected){
// Do whatever you need here, hidediv() etc..
console.log(selected.title);
});
Edit: If you only want something triggered for a particular tab, you can check the title inside the function:
dojo.subscribe("myTabs-selectChild", function(selected){
if(selected.title == "Setup")
{
hidediv();
}
});
Perhaps a more elegant way to do it, is to use the ContentPane's onShow event, for example like this:
<div dojoType="dijit.layout.ContentPane" title="Setup"
onShow="hidediv">
<!-- Content -->
</div>
I am using this sliding top panel using mootools (for orientation, the code is basically the same).
I want it to appear when the page is loaded, means, index.html is loaded.
I achieved this simply by adding the corresponding JavaScript to index.html:
<script type="text/javascript">
window.addEvent('domready', function(){
var mySlide = new Fx.Slide('top-panel');
$('toggle').addEvent('click', function(e){
e = new Event(e);
mySlide.toggle();
e.stop();
});
});
</script>
(Of course this is also the top-panel itself)
When you click a link in this top panel, a new page will be loaded into a specified div, and then, the top panel should be hidden.
I think you can do this by adding
var mySlide = new Fx.Slide('top-panel').hide();
or
mySlide.hide();
in some JavaScript. I think it should execute, when the ahah.js-javascript is done loading the content into the div, I tried adding both the JavaScript quoted above and the two variations of mySlide.hide() in ahah.js. (into ahahDone(), after the last getElementById).
Using this setup, I get the following rendering. (This is after clicking the corresponding link which loads content from an html-file into a div and clicking on the "More (mehr)" link on top of the page which should slide down the top panel.) But only the button which is visible always (sub-panel) slides down and is visible, the actual panel content does not show up.
Any ideas? It would be great, if you could leave an answer with a short explanation.
This looks like a scoping problem. You declare mySlide inside an anonymous function, and its scope will be limited to that function. Later, when $('toggle') is clicked, the event that is fired is outside the scope of that function so it does not have access to mySlide.
A quick fix (if you don't mind using globals) could be declaring var mySlide=null in the main javascript so that you have a closure, and then change your current var mySlide=new Fx.Slide(...) to just mySlide=new Fx.Slide(..)
(or it could be something else entirely...)