I added AMP-Pinterest to my AMPed page. I'd like to set the propery
data-pin-hover="true" to get the PinIt button on the image. For some reason it doesn't work.
Here is what I have so far:
That's in <head>:
<script async custom-element="amp-pinterest" src="https://cdn.ampproject.org/v0/amp-pinterest-0.1.js"></script>
(and of course other AMP stuff)
That's in <body>:
<amp-pinterest height=28 width=56
data-do="buttonPin"
data-url="URL"
data-media="IMG_URL"
data-pin-hover="true"
data-description="DESC">
</amp-pinterest>
I also added data-pin-nopin="false" and data-pin-no-hover="false" to my amp-img's declaration (just in case, if it's not by default set to false. More info here: https://www.ampproject.org/docs/reference/components/amp-pinterest):
<amp-img alt="NAME" src="IMG_URL" width="600"
height="400" layout="responsive" data-pin-nopin="false"
data-pin-no-hover="false" />
But it still doesn't work (the PinIt button shows up above/below amp-img).
Question:
Now I'm wondering if I did something wrong or it's simply not supported using AMP-Pinterest to hover an image? (I can't find any example).
Unfortunately, this option doesn't to be available for amp-pinterest at the moment (going through the docs and other examples). However, if you don't prefer for the Pin It button to not appear above or below, you can instead have it embedded in the image, as seen in the amp-pinterest samples:
Embed pin widget
To embed the pin widget, set data-do to embedPing. The data-url attribute must contain the fully-qualified URL of the Pinterest resource.
Related
I'm struggling to get the contact ref to work from different pages.
Basically for every product a different detail reference is provided (see 4867820 below).
I would like to create a button which links to the #contact id for every page on the website.
Basically if I put a link on the button including the reference, this works perfectly.
http://www.mywebsite/product/4867820#contact
However I am wondering if I can create something similar where the button links to the contact id on the same page without using the reference number.
http://www.mywebsite/product/this page#contact
So basically my question is how do I link to only #contact on this page without the reference numbers, so I can create 1 button on the page template.
Regards,
Assuming it will always point to the same page as the button:
a) If you are able to use anchor tags instead of buttons (and CSS-style them to look like buttons), you can simply point the anchor's href attribute to the section name.
It works like a relative link, just appending the href to current URL. Like so:
Contact Here
Or b) if you have to use only a <button> or <input> element specifically, you will need to use javascript to set the location in onclick handler of the button. For details on that see: Javascript inline onclick goto local anchor
I know how to do using html and JavaScript
<h2 id="C4">Chapter 4</h2>
Jump to Chapter 4
This is what I am trying in SAPUI5. On click to Back to top link it should navigate to helpButton. This is not working for me.
<Button id="helpButton" icon ="sap-icon://sys-help" />
<Link text="Back to top"
press="#helpButton"/>
You can actually do this in UI5. A little differently than how you tried though.
The problem is that the UI5 ID is not the same as the HTML ID (which is what you want to use with the hash-link for the browser to jump there). Also, you cannot specify a URL inside the press "attribute" of the link. The press "attribute" is in fact an event (so you can only specify an event handler name).
So to be able to do what you want, you have to use the href property of the Link and fill it with the HTML ID of the target control. You can do this on the onAfterRendering hook of the view (that's when you are able to find the HTML ID of the target control):
onAfterRendering: function() {
var oRef = this.byId("target").getDomRef();
this.byId("link").setHref("#" + oRef.id);
}
You can find a working fiddle here: https://jsfiddle.net/93mx0yvt/26/.
I am working on a personal site, and the site uses an <iframe> to display most of its contents. You navigate the site by changing the target of the <iframe> to a specific .html.
Here's an example of how the navigation works:
<ul>
<li><a>onclick="document.getElementById('iframe1').src='home.html'>Home</a></li>
<li><a>onclick="document.getElementById('iframe1').src='prjcts.html'>Projects</a></li>
</ul>
<iframe src="home.html" id="iframe1"></iframe>
The problem that I've encountered is that since most things are is inside of the <iframe> that I can't link directly to any specific content.
If I wanted to show someone the Projects page, I can only link "www.example.com/" and tell them to navigate there themselves, and not simply link "www.example.com/projects".
My theory is that you can do it with something like:
"www.example.com#projects" using ID's or something, but since I'm pretty new to HTML5, I might be completely wrong. I have no idea how to make it work, and I can't seem to find anyone explaining it.
Is there any way to use the URL to specify an <iframe> target, and if so, how?
You would want to check the url and then set the src of your iframe using the url:
This is just an example of how you could do it, you should use maybe an array of URLs. There are a bunch of ways to accomplish this.
HTML:
<div id="wrapper">
<iframe id="myIframe" src="http://example.com/"></iframe>
</div>
JavaScript (using jQuery here):
$(document).ready(function () {
var myPath = window.location.pathname; // returns something like /projects.html
if (myPath == "/projects.html") {
$('#myIframe').src = "http://www.example.com/projects.html"; // sets the src of your iframe
}
});
Refer to this post's answer: dynamically set iframe src
I want to know how in this web site, when I hover the mouse over report ad of the page, it show the link as ....com/***/***#report-item, but when I click on it, it shows me a pop-up. but still the original URL is not changing to ....com/***/***#report-item?
I checked the source of the page, and it shows the link code as:
<span><i class='ico-report'></i>Report Ad</span>.
That is because they prevent the browser from doing what it is meant to do (default event).
Here is the JavaScript code for that:
event.preventDefault();
You can include that inside the element, something like
Link
And inside the function, add that code. It would prevent the default function; that is to change the URL.
Maybe they're using jQuery for that because I can't see any sort of onclick="" inside the element. So what they might be doing would be this:
Generate Report
and the jQuery code would be as:
$('a.report').click(function () {
event.preventDefault(); // prevent the default function of the hyperlink
/* show the pop up */
});
This way, the website is preventing the default function and is using that link to do some other function.
Here is a fiddle for that: http://jsfiddle.net/afzaal_ahmad_zeeshan/3zPd6/
To get the Elements Attribute
To get the element's attribute in JavaScript you use the following code
document.getElementById("hyperlinkId").href;
This would get you the href of the hyperlink. And you can reference it in your call.
I would like to set an image as nothing. By doing src="" many people say it can cause problems to browsers:
http://www.nczonline.net/blog/2009/11/30/empty-image-src-can-destroy-your-site/
so I am not sure if below can face to the same problem as setting src to empty:
<img id="myImage">
since there's no src attribute on this case.
So If I want to initially set an image to nothing, what's the best I can do?
Best solution
Initialise the image as follows: src="//:0" like here: <img id="myImage" src="//:0">
Edit: as per the comment of Alex below, using //:0 apparently can trigger the onError event of the img. So beware of this.
Edit 2: From comment by Drkawashima: As of Chrome 61 src="//:0" no longer seems to trigger the onError event.
Other solution
Alternatively, you can use a very small image until you actually fill the src tag: like this image. With this 'very small image', you would then initialise the tag like so:
<img src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs%3D" width="0" height="0" alt="" />
source
Remove element from DOM
Alternatively, if you simply don't want the element to appear in the DOM, just use some JavaScript:
var myObject = document.getElementById('myObject');
myObject.parentNode.removeChild(myObject);
(as per this answer, using JavaScript's .remove() function is not recommended, due to poor browser support in DOM 4)
Or just use some jQuery:
$("#myObject").remove();
Using a 1px transparent encoded image is an accepted solution (recommended by CSSTricks)
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="">
PS: Don't be confused later when DevTools shows these as network requests of zero bytes, that's just how DevTools works, all imgs are listed as network requests.
DS: alt="" is included because otherwise, screenreaders will read the src out loud
Just use a hash symbol #. It's valid value for src attribute. :)
https://stackoverflow.com/a/28077004/3841049
Use this script to set a default image if src is empty or blank
$(document).ready(function () {
$('img').each(function () {
if($(this).attr('src')=="") {
$(this).attr('src', 'Images/download.jpg');
}
});
});