I have an image of a video which is linked, and it is surrounded by Div tag that launches my content locker. I want to track how many times people open the content locker using Google Content Experiments (I have a separate goal setup for actual completion of the locker).
The div class "link_loc" launches my locker successfully, but I'm not sure about the onClick event working correctly with Google Content Experiments.
So this is the code I have... is this correct?
<div class="link_loc"
onclick="_gaq.push(['_trackEvent', 'ExperimentConversions', 'Click', 'Video']); return false;">
<a href="http://example.com/">
<img class="size-full wp-image-8 aligncenter" title="Play Video"
src="http://example.com/video_player_image.jpg" alt="Play Video"
width="640" height="366">
</a>
</div>
I have searched for a solution but am still very confused (I'm not very technical minded).
Any help appreciated.
Thanks,
Ben
Related
I'm having a little trouble with an image linked to a section of the page. This link works fine when input into the bar and loaded, it'll scroll down but once the base page is loaded, if i click the image with the link, it doesn't want to go down the page to the tabbed section in question.
https://www.bollostore.com/beolab-50
That is the base page i'm running it on whilst
https://www.bollostore.com/beolab-50#product.view.paybyfinance is the link to the 'pay by finance' tab lower down the page. It is this that works a-ok if i put it straight into the url bar. But when I click the finance banner in the short description, it doesn't trigger.
The original that i've used is:
<img class="aligncenter wp-image-1176 size-full" src="https://www.bollostore.com/media/tmp/catalog/product/c/l/click-to-calculate.jpg" alt="finance for your tv and audio" width="1000" height="auto" />
you need to put a name tag in a element like
<a class="data switch" tabindex="-1" data-toggle="switch" href="#product.view.paybyfinance" name="product.view.paybyfinance" id="tab-label-product.view.paybyfinance-title">
Pay by Finance </a>
There is a jquery magnific popup gallery containing 6 pics. I want that if a user clicks on a pic he/she should be directed to an html page (embedded.html). How can I make this happen?.
Original Code (as is present now on the website):
<div id="gallery" class="tm-content-box">
<div class="grid tm-gallery">
<figure class="effect-bubba">
<img src="img/img-11-08.jpg" alt="Image 8">
<figcaption>
<h2>TEST</h2>
View more
</figcaption>
</figure>
I modified above(index.html) as follows. ( instead of img/img-11-07.jpg getting displayed I want embedded.html to be displayed ):
<div id="gallery" class="tm-content-box">
<div class="grid tm-gallery">
<a href="embedded.html">
<figure class="effect-bubba">
<img src="img/img-11-08.jpg" alt="Image 8">
<figcaption>
<h2>TEST</h2>
</figcaption>
</figure>
</a>
But it is still not working now. on clicking TEST it is saying The image could not be loaded. And if I further click on The image in this statement I am redirected to embedded.html successfully.
I know there is some css interfering. Kindly help. Also let me know if you want more informaation.
I have downloaded this website as a template and I am modifying its code.
UPDATE:
I have uploaded the entire website code here:
https://drive.google.com/drive/folders/13IURTJWYTXgifAO72AgTwomKaFNPFDkc
Conceptually, you will have to deregister the click event handler attached by the gallery. Specifically, the click handler is attached to the <div class="tm grid gallery"> element containing the anchor supposed to trigger the load of the html. Thus one of the following commands should do the trick, depending on how the event handler has been registered (in interactive testing using Chrome's development tools, the unbindcall would suffice).
The parent() call travels to the designated div element among the anchor's DOM ancestors. Adjust that if you choose a different subtree structure:
$("a[href='embedded.html']").parent().off('click');
$("a[href='embedded.html']").parent().unbind('click');
As to when to call this code depends on when the gallery attaches its event handlers. I'd suggest to do that at the end of a ready handler.
Use Case: displaying info in a subset window of the SAME page the user is in. For example. I have a list on the left side. On the right side is details of a record based on what data point is clicked on the left. Currently I am trying to use an iframe tag. Both parent and target iframe are content from my single same domain/site i.e. there is no external sources I'm referencing.
I've had this iframe working in the past, then one day I went to check it out and it was not working as it should.
So the parent page has a list of students (in the left column).
The target iframe (right column) is supposed to show the students details one the students link is clicked in the parent page.
Instead what it's doing now, is opening a whole new tab in a separate window with the students details.
UPDATE: Jan16, 2018
So i tested it in four browsers. Only Safari apparently supports the inwindow target render. Chrome, Opera and Firefox all opened new tabs - not what i want. What gives? Here is the full html (I realized I should grab the source vs what my front end html looks like in Wordpress... sorry).
<p><iframe id="ifrm" src="http://example/wp-admin/admin.php?page=wpbc&wh_approved&wh_is_new=1&wh_booking_date=3&view_mode=vm_listing" width="100%" height="400">Your school has not setup a booking listings view. Please speak to your school or contact admin to have it set up.
</iframe></p>
<p>Welcome Instructor. This is your personal Dashboard.
<p><strong>School Name:</strong> School name <br />
<strong>Your ID:</strong> instructor3</p>
<hr />
<div class="fivecol-one"><strong>Student ID:</strong> user<br />
<a href="http://example/frm_display/Instructor-dashboard-iframe?student=453369" target="myiframe">View Details in window<br />
</a></p>
<hr />
<p> <strong>Student ID:</strong> jan17<br />
<a href="http://example/frm_display/Instructor-dashboard-iframe?student=45988" target="myiframe">View Details in window<br />
</a></p>
<hr />
<p> <strong>Student ID:</strong> user2<br />
<a href="http://example/frm_display/Instructor-dashboard-iframe?student=44499" target="myiframe">View Details in window<br />
</a></p>
<hr />
<p> <strong>Student ID:</strong> jstudent<br />
<a href="http://example/frm_display/Instructor-dashboard-iframe?student=464428" target="myiframe">View Details in window<br />
</a></p>
<hr />
<p> </p>
</div>
<div class="fivecol-four last">
<iframe id="myiframe" scrolling="yes" frameborder="1" src="http://example/frm_display/Instructor-dashboard-iframe/" height="500px" width="100%">
</div>
<div class="clear"></div>
So you can see that I have named my iframe id="myiframe" and my target="myiframe". I did notice that i had forgotten to close the iframe tag in the target, however, that did not seem to make a difference. I cleared my cache and refreshed my pages.
As mentioned it's working in Safari desktop only. HOWEVER, (and this is weird) in mobile, it's working in ALL browsers! (i removed my explicative..what was i thinking)
I don't know if this is applicable, but this site is hosted in Wordpress and using formidable forms. In particular the iframe is displaying what's called in formidable a 'view' i.e. a special page that shows data from formidable. It's not formally a 'page' in the Wordpress sense of the meaning. Hence I'm wondering if for some reason the iframe tag is getting confused. One suggestion was to use
in the header of the iframe page. And that's when i realized i can't apparently do that because as far as I know a formidable 'view' does not have a header?
HELP!!! please.
this is embarrassing.
I was simply missing a name attribute
name="myIframe"
wow... sorry for posting bone head move, but hope it can help someone.
I'm trying to parse a html code for specific content, but the problem I'm running into is that certain websites require you to click a "Show more" button.
When I grab the URL there's no way to tell it I want the full code with the "Show more" button clicked. Is there a way to grab the full source code of the page, because it keeps getting cut off after a point.
Example website: https://play.google.com/store/search?q=fm%20radio&c=apps&hl=en
The source code gets cut off at the "Radio hungary" app, which is the last app that loads automatically.
This even happens when I load everything and then try to view the pages source code.
It ends in:
style="display:none"> Show More </button> <div class="bottom-loading" style="display:none"></div> <div class="footer"> <div class="footer-links-container"> <span class="copyright"> ©2016 Google</span> <a class="footer-link id-no-nav" href="https://play.google.com/intl/en_us/about/play-terms.html" target="_blank"> Site Terms of Service</a> <a class="footer-link id-no-nav" href="http://www.google.com/intl/en_us/policies/privacy/" target="_blank"> Privacy Policy</a> <a class="footer-link id-no-nav" href="http://developer.android.com/index.html" target="_blank"> Developers</a> <a class="footer-link id-no-nav" href="https://play.google.com/artists" target="_blank"> Artists</a> <a class="footer-link id-no-nav" href="https://support.google.com/googleplay/?p=about_play" target="_blank"> About Google</a> </div> </div> </div></div><div class="loading" jscontroller="EgJAl" jsaction="rcuQ6b:rcuQ6b" id="page-load-indicator"></div><div id="instrument-manager-parent"></div><script src="https://wallet.google.com/inapp/lib/buy.js"></script><script
Even if I click the show more button.
The purpose of this is to grab all the URL's of the images, and I can't do this by hand because well.. we have thousands of images.
I believe if you just take advantage of the Javascript HTML DOM methods you can accomplish what you want to achieve.
This will help: http://www.w3schools.com/js/js_htmldom_methods.asp
By using this, you can target specific elements/ids/classes and pull or modify the information you want.
Jquery will also help you a lot with this.
You can solve it using Javascript dom,steps to do are
keep your content in a div element
set its default height as a fixed value
on clicking the show more link execute a javascript function to make the div element height to auto
in this way you can show content excerpt with javascript
If you go for server side, you can create a new page for showing the content.
I want to know how I can link to a video using a thumb of a image from one page to another.
For instance if I wanted to link to the page only from one page to another I would simply put
<img src="theotherpage.html" />
But that doesnt quite do the job for me. I need to link to the video directly.
How can I do that?
Just wrap the image with <a> tag
<a href="link-to-direct-video">
<img src="image-thumb-src" />
</a>
If I understand your question correctly.
If you want to link to a page with one video, use YardenST's answer. If you want to link to a page with many videos, but you want to scroll to that video you can use an anchor.
On the videos page, say you have the following HTML:
<div id="video1"> ... </div>
<div id="video2"> ... </div>
If you wanted to link to the second video, you could use
<a href="/videos.html#video2">
<img src="image-thumb" />
</a>