I know this is probably pretty simple but I am a novice at JavaScript.
Trying to change the image/link being displayed based on the url path.
So any page at foo.com would display an image of a dog <div id="promo"><img src="img/dog.jpg"></div>
Unless it was under a the directory foo.com/cat then <div id="promo"><img src="img/cat.jpg"></div>
Many thanks!!!
Here is an example of how you can achieve this with the markup you posted:
<div id="promo">
<a href="dog.html">
<img src="img/dog.jpg">
</a>
</div>
Now here some vanilla JavaScript that does what you need: changes the image src based on the location pathname:
var path = window.location.pathname;
var promo = document.getElementById('promo');
if(path.match(/cat/)){
promo.getElementsByTagName('img')[0].src = 'img/cat.jpg';
}
You can also view this with source with a test case here: http://jsfiddle.net/jordanandree/3yCgY/2/
Related
I'm trying to get a simple piece of text displayed as a link. When it is rendered it looks correct eg: http://www.google.com, but the link redirects to my project with the link appended on the end:
http://localhost:8050/brents-test-community/ru61pmlc7vry/groupplaymanager-display/h16wwislnsl/www.google.com, instead of just http://www.google.com.
This what i used:
var urlHtml = groupPlay.Url.link(groupPlay.Url);
var url = document.getElementById('GroupPlayInput_Url');
url.innerHTML = urlHtml;
The value of groupPlay.Url is a simply "www.google.com".
And this is the div:
<div style="padding-top: 5px;" id="#Html.IdFor(view => view.GroupPlayInput.Url)">
#if (Model.GroupPlayInput.Url.IsNotNullOrEmpty())
{
#Model.GroupPlayInput.Url
}
</div>
You can add http:// beside your url. This will indicate to the browser that the url is an absolute url (not a relative url).
Example : https://jsfiddle.net/nevgc71g/
Need to know how to hide the link "IWS" when accessing to certain country base on URL
www.xxx.com/US/en - it will show up IWS link
www.xxx.com/SG/en - it will hide up IWS link
<div class="linklist-title">Policy & Services</div>
<div class="linklist">IWS
<a target="_blank" href="http://.com">PS</a>
WSP
WSA
ACC
</div>
Are you using jQuery? If so, try something like:
if(location.href.match(/sg/i)) {
$('.linklist:contains("IWS")').hide();
}
You should think about using a more generalized title for this kind of issue.
I am trying to get the URL of a link in the source code. The challenge is that the URL is hidden behind a image, and thus only letting me fetch the image-url.
I've been trying to figure a way to solve this issue by using the new CSS selector in the trigger system and also made a DOM variable that should get the URL when the image is clicked. There can also be multiple downloads.
Here is an example of what I am trying to achieve:
<div>
<div class="download">
<a href="example.com/The-URL-I-Want-to-get-if-top-image-is-clicked.pdf" target="_blank">
<img src="some-download-image.png"/></a>
<div class="download">
<a href="example.com/Another-URL-I-Want-to-get-if-middle-image-is-clicked.pdf" target="_blank">
<img src="some-download-image.png"/></a>
<div class="download">
<a href="example.com/Last-URL-I-Want-to-get-if-bottom-image-is-clicked.pdf" target="_blank">
<img src="some-download-image.png"/></a>
</div>
</div>
There are much code above and below this snippet, but with the selector it should be fairly easy to get the information I want. Only that I don't.
If anyone have met this wall and solved it, I really would like to know how. :)
This is one possible solution. So as I understand it, you would like to grab the anchor element's href attribute when you click the "download" image.
A Custom Javascript variable would need to be created so that you can manipulate the click element object:
function(){
var ec = {{Click Element}};
var href = $(ec).closest('a').attr('href');
return href;
}
So you will need to do your due diligence and add in your error checking and stuff, but basically this should return to you the href, and then you will need to parse the string to extract the portion that you need.
I am newbie in front-end web development.
I am using flippant.js for flipping the dialogue.
<div id="overlay-box" class="overlayBox">
<a class="closeBtn" onClick="closePop()">X</a>
<button id="flipCard">Flip</button>
<div class="content" ></div>
</div>
<script type="text/javascript">
var front = document.getElementById("overlay-box")
var back_content = "
<div class = 'overlayBox' style='top: 50.5px; left: 338px; display: block;'>
<h2>Hello</h2>
<a class = 'closeBtn' onClick = 'closePop()'>Y</a>
<button id = 'closeCard'>Back</button>
<div class = 'content'></div>
</div>"
var back
document.getElementById("flipCard").addEventListener('click',function(e){
back = flippant.flip(front, back_content,'card')
document.getElementById("closeCard").addEventListener('click',function(e){
back = back.close();
})
})
But the flippant plug-in asks for back_content rather than full HTML file.
I want to override that but facing a problem.
I tried to change the flippant.js file where it was taking content and converting that into HTML whereas the front document was not converted.
I am able to use it but then I will have to write my all HTML code in back_content variable which is ugly design.
I also tried to give HTML document directly by $(HTML_file).html but still no success.
The other problem is when I am giving all the HTML in the variable then it is not calling the js classes and all styling code also
Please suggest how to use flippant plug-in.
Thanks in advance
For flippant.js code refer to its github page https://github.com/mintchaos/flippant.js/blob/master/flippant.js
I'm trying to figure out just how a particular function works on a Facebook page, and being no friend of JS syntax, am having trouble. Here's the question mark bit:
<a href="#" clicktoshowdialog="my_dialog" onclick="
(new Image()).src = '/ajax/ct.php?app_id=4949752878&action_type=3&post_form_id=3b933f46f9c4c44981e51b90c754bfce&position=2&' + Math.random();
FBML.clickToShowDialog("app4949752878_my_dialog");
return false;">
<img src="linktopicture" title="Are your friends fans?" width="190" height="230" />
</a>
<div style="display:none">
<div id="app4949752878_my_dialog" fbcontext="aa3fcff8e653">
<div class="app_content_4949752878" style="padding:10px">
<div with hidden then exposed content...
The functionality of this is an image that, when clicked, pops out the previously hidden div. I know that the app###### is prepended to all JS used in Facebook to limit its scope. I'm confused by the anchor parameter of
clicktoshowdialog="mydialog"
What is that identifying, and how is it targeting the div that's exposed when the image is clicked? Thanks for any clarification, and let me know if I can post any more sample code.
According to the wiki it's just for opening the dialog (which is defined at the bottom). Facebook generates the JS to open the dialog. The attribute got post-processed and the JS code (that you see in the onclick= attribute) was generated on it's basis.