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>
Related
Basically, I would like to navigate to a page through an image, and on this new page it will contain the image clicked on. You're probably thinking I am stupid and there is a simple way but I would like to have a range of images that when clicked bring me to the same page but display ONLY the image clicked on.
Bit difficult to explain but hopefully you get what I am saying, I don't want a page for each image. I would like a Page that contains all the images but only displays the one that is clicked on the first "Home" page.
Thanks, the html I have for it ATM is below:
<img alt="Predators" src="Predators.jpg"
width="180" height="180">
</a><a href="Page2 - Mercurial Superfly.html">
<img alt="Mercurial Superfly" src="Mercurial-Superfly.jpg"
width="180" height="180">
</a><a href="Page2 - 99g.html">
<img alt="99g" src="99-gram-boots.jpg"
width="180" height="180">
</a><a href="Page2 - LimitedRonaldinho.html">
<img alt="LimitedEditionTiempo" src="Limited Edition Ronaldinho Tiempo.jpg"
width="180" height="180">
</a>```
So the href in the <a> tag is where it takes you. So if you want every image to take you to the same page use the same page name.(?) If you paste "https://www.google.com" in every href attribute every image will take you to Google. So instead of google you want to use your link.
If you want every picture to be displayed on one site depending on what was being clicked on I guess you'll need to use JavaScript. Your other website needs to know which image was clicked on.
I was doing a page with a list of sites I need to visit daily, such as exercise to learn Html, CSS. I would like to know if it is possible to create a link with a page icon that is in the upper tab of the browser (chrome).
Ex: I want to list StackOverflow on my site. So I create a link and for the icon, I want to use the image that is on the tab of the page itself, as in this:
You can use:
https://plus.google.com/_/favicon?domain=www.yourlink.com
example
<a href="">
<img src="https://plus.google.com/_/favicon?domain=www.stackoverflow.com"> Stackoverflow
</a>
If I'm correctly getting what you want, you'd need to either have a local copy or link to the sites' favicon, like so:
<img src="https://cdn.sstatic.net/Sites/stackoverflow/img/favicon.ico" />
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 have a lightbox setup on my site and well I've got an unordered list and the images are displayed in a list item. I've got an href linking to the full size image then my lightbox code and then an img src with a thumbnail image. Why is my lightbox displaying 2 images and not the one.
I think it's displaying my thumbnail and the full size image but I'm not sure. When I click the image, it says 1-2. If you press the next button it shows the same image.
A peek at the code below. I expect it to be fairly simple but I'm learning..
<ul>
<li>
<a href="images/respectyourelders-full.png"
data-lightbox="recentwork"
data-title="This design was made for an apparel company called VolkWear Clothing.">
<img src="images/car1.png" alt="Respect your Elders Illustration" title="Respect your Elders Illustration" />
</a>
I am sure it is because you used data-lightbox="recentwork" for more than one hyperlink. Be sure to check it carefully.
i have been trying to code using html, where there is an image file, and upon clicking the image, it will pop up a different image in the same screen but in a separate window with specified width and height.
Currently, i'm only able to display an enlarged version of the same pic when i click.
below is the simple code where i'm trying to click on the image of "spoon of cereal", and for the image of "honey" to be displayed in a pop up window in the same screen when i click. but it displays the honey picture in a new page instead, and I will need to press back to go back to the page.
How would I need to code such that when i click on the "spoon of cereal" pic, it will still remain at that page, but a popup of the "honey" pic will show in its original dimension?
<html>
<body>
<a href="http://upload.wikimedia.org/wikipedia/commons/c/cc/Runny_hunny.jpg" target="_self" imageanchor="1">
<img border="0" height="104" src="http://upload.wikimedia.org/wikipedia/commons/c/c1/Spoonful_of_cereal.jpg" width="150" /></a>
</body>
</html>
You are going to do something like this:
<html>
<body>
<img border="0" height="104" src="http://upload.wikimedia.org/wikipedia/commons/c/c1/Spoonful_of_cereal.jpg" onclick="MyWindow=window.open('http://upload.wikimedia.org/wikipedia/commons/c/cc/Runny_hunny.jpg','MyWindow','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no,width=600,height=300')" width="150" />
</body>
</html>
Hope this is what you are looking for!
You can change all the options in there. Reference here