hello everybody!
First of all I have to tell you I'm a newbie in terms of HTML, Javascript and coding in general. But I spent last weeks to learn as much as I can.
Now, I run a website and my dev team is not workgin with me anymore, then I have to do all by myself.
My problem is: I have a sort of "big banner" and the image shown is automatically picked up based on your browser resolution (that's fine, I asked for this). Now, what I'm trying to do is to add a hyperlink to this image. I tried many thing, but I couldnt.
Please could you tell me how to edit this code?
Thank you
Miki
<div class="main top">
<div class="main-holder">
<div class="cover-holder big-img-holder" id="img-holder">
<script>
function randomInteger(min, max) {
var rand = min + Math.random() * (max - min)
rand = Math.round(rand);
return rand;
}
var rand = randomInteger(1, {{$lang.extras.number_screenshots_rotations}});
var picture = document.createElement('picture');
var source = document.createElement('source');
source.srcset = '{{$config.statics_url}}/images/bg_rotations/extras-' + rand + 'bd_HD.jpg';
source.setAttribute('media', '(max-width: 2000px)');
var img = document.createElement('img');
img.src = '{{$config.statics_url}}/images/bg_rotations/extras-' + rand + 'bd.jpg';
picture.appendChild(source);
picture.appendChild(img);
document.getElementById('img-holder').appendChild(picture);
</script>
</div>
Usually you can set a hyper link with the HTML tag <a>
So you could try
<a href="your-URL">
<div class="cover-holder big-img-holder" id="img-holder">
<script>
...
</script>
</div>
</a>
Wrap the script in something like
<a id="img-link">
or just change img-holder to be an <a> instead of a <div>
Then somewhere in your script set the url for that <a> container
document.getElementById("img-link").href="url";
There's no href attribute to an image itself, so you must provide it to <a>
That is if you wanna do it dynamically, if the url is always the same, just wrap your <script> block with this
<a href="#">
<img>
</a>
It is easier when you know that DOM is gonna have the same structure, in this case, an image, and an <a> tag wrapping it, just set ids for both, and manipulate their attributes, otherwise, you can also create this <a> element in Javascript, and set the image with .setChild() to it
Related
I'm having a problem on how will I target, here's the scenario, whenever I click the links Home, or food or resort etc. the contents of it should be outputted on the display below. What always happen is that when I click those links It always goes to a new tab. What I wanted is that it should display on the same page and on a given div. Please help me, I've been trying to search the internet but different results are coming up.
Here are my links
<div id = "panel">
<p>
<a href = "home.html" target = "display">
<font color ="white">Home</font
</a>
<a href = "resort.html" target = "display">
<font color ="white">Resort</font>
</a>
<a href = "hotel.html" target = "display">
<font color = "white">Hotel</font>
</a>
<a href = "food.html" target = "display">
<font color ="white">Food</font
</a>
<a href = "rates.html" target = "display">
<font color="white">Rates</font>
</a>
<a href="reservation.html"target="display
<font color="white">Reservation</font>
</a>
<a href = "contact.html" target = "display">
<font color = "white">ContactUs</font>
</a>
</p>
</div>
This is where the content should be put in
<div id="display">
<iframe name="display"></iframe>
</div>
If I understand the question--and I really don't--I think you're problem is pretty easy to fix. Just change this:
<name = "display">
To:
<iframe name="display">
I'm assuming you want to load those links inside an iframe, yes? Otherwise what you want to do will require javascript. But again, I'm not sure I understand.
There is no <name> tag in HTML, but there is a name attribute
Edit to explain iframes:
iframes load one web page B inside of webpage A, but the two are still separate pages. The "box" is probably the border of the iframe itself. The scrollbar appears when the content of webpage B is too large for the iframe to display everything at once. To get rid of the scrollbar, you can either make the iframe larger or make the content of webpage B smaller.
Making an iframe larger is no different than making any other element larger: just change it's CSS.
I have tried this. Use this code <JsFiddle Link> :
At first load the jQuery:at the top of the code
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
Then add this jQuery code at the bottom of the file. In this code you will just check when an anchor tag is clicked and then return false which will prevent the anchor tag click submission. As well as load function will load the desired file of the "href" attribute.
<script>
$("a").on("click", function(){
//alert($(this).attr("href"));
$( "#display" ).load( $(this).attr("href") );
return false;
});
</script>
NB: If you are running this in local server there is no problem. You also can load .php file in it. But if you are running it in Windows explorer or linux file system then open it in firebox.
yes crowhill is right. i think you want to have a single page website. then you have to write all the contents in a single html page with different divs for different contents which you want to display using the links and use the id of the divs in the href part of your tag (i.e. ).
i think this will clear your query.
https://www.freshdesignweb.com/free-one-page-wordpress-themes/
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 trying to swap images using JavaScript. I have a main content area the loads one image. I have a sidebar with a list of links and I want to use JavaScript to change the image with each link. here is my code so far:
<html>
<head>
<title>Rat Dog Inc. ~ Services</title>
<script type="text/javascript">
var myImg;
var myImage= [];
myImage[0] = "../images/rd_surf_large.jpg";
myImage[1] = "../images/laundry.png";
myImage[2] = "../images/tug-o-war.png";
myImage[3] = "../images/cuddlepuppy.png";
myImage[4] = "../images/rd-howling.mp4";
function displayImg(){
document.getElementById('myImage[]');
}
</script>
</head>
<body>
<div id="main">
<img src="../images/rd_surf_large.png" alt="Rat Dog Inc." id="myImg"/>
</div>
<div id="sidebar">
<h2>Rat Dog Inc. Most Popular Services</h2>
<ul>
<li>Surfing Lessons <span style="font-size: 12px">(img)</span></li>
<li>Laundry Folding <span style="font-size: 12px">(img)</span></li>
<li>Tug-O-War Arm Workouts <span style="font-size: 12px">(img)</span></li>
<li>Cuddling <span style="font-size: 12px">(img)</span></li>
<li>Howling Lessons <span style="font-size: 12px">(video)</span></li>
</ul>
</div>
Ok. So here's the deal.
When you put your image on your page , like this:
<img src="image1.jpg" id="myImage">
And we assign the I'd 'myImage' to it....if we want to change the image via a link (I prefare a button), we use javascript in a way to manipulate it.
You simply use this method known as :
document.getElementById()
Which finds an element in our page by its I'd.
So if we put this button on our page:
<button onclick="changeImage()">Change The Image</button>
And put this script (which has the changeImage() function) :
<script>
function changeImage(){
var myImage = document.getElementById("myImage");
//then we change the src of the image
myImage.src="image2.jpg"
}
</script>
Our image will change of we click the button.
For reference , please visit http://www.htmldog.com/guides/javascript/intermediate/thedom
Thank you
You can use document.getElementById("image").src="image.png"; to change the src tag of an element.
Although for what you are doing, I reccomend you take a look at jQuery
please try and use this method of getElementById
For example:
<img id="image" src="image1.jpg">
<button onclick="changeToImage2('image')">Image 2</button>
<script>
function changeToImage(id) {
var myImage = document.getElementById(id);
myImage.src = "image2.jpg";
}
// then create other buttons and other functions to change the image.
</script>
Your javascript is incorrect. I'm not quite sure you understand how it works.
First of all, your function doesn't accept any parameters, and yet you're providing it with one. It will just ignore this because it doesn't know what to do with it.
Next, your document.getElementById in your displayImg() has the wrong input. Right now it's literally looking for an element with the ID "myImage[]"... of which there are none.
Also, you have a variable you never use (myImg). You should probably get rid of it.
Again, I'm getting the sense that you don't really know javascript that well or don't get the theory behind it. If you need help, w3schools has some great tutorials.
Looking for a way to integrate two plugins so that I can have a HTML5 video player with a clickable html playlist. In order to do this, I need to alter one of the plugins so that instead of declaring:
var html = '';
html += '<video width...>'
html += '<source... /source>'
html += '<.video>'
return html
and then refilling on each click, it leaves the current contents alone, only replacing the content of the source tags. I'm trying something like:
html.replace(/'<source>'.*'</source>'/ , '<source> + myNewContent + '</source>');
return html;
I worry that my syntax for .replace() is wrong, or that replace can't handle strings like that.
As a side note, I know I'll need to re-run the function in order for it to reload with the new source, it's just that one plugin is deleting the content of the other, so I don't even have a chance.
Just select it with jquery and overwrite the source. (You could do it without jQ, but nevertheless)
var s = "newSourceString";
$(".videoClass source").html(s);
Now put the classname in your video attributes and fire away.
Just copy paste from the player documentation:
<script>
// JavaScript object for later use
var player = new MediaElementPlayer('#player',/* Options */);
// ... more code ...
player.pause();
player.setSrc('mynewfile.mp4'); /*********** this is what you want ***********/
player.play();
</script>
mediaelementjs.com
EDIT
Answer to the question:
var source = '<source>1 1bla bla bla xx uu dfhf</source>'
var startStr = source.indexOf('<source>') + 8;
var endStr = source.indexOf('</source>');
var oldSrc = source.substring(startStr, endStr);
console.log(oldSrc);
source = source.replace(oldSrc, 'new source');
console.log(source);
I believe this answers your original question.
Many thanks to Rudy for his answer, it put me on the right track, though I changed it to handle a dynamic source (his probably could too).
When you replace youtube videos in mediaelement.js you have to redeploy the plugin, so I ended up emptying the plugin container, storing all the hrefs as a data attribute in the list and then refilling the container with the appropriate html, and recalling the function at the end.
Here's the code:
HTML:
<div class="youtube-slide">
<div id="ytvideo">
<!--here's the initial video source-->
<video width="100%" height="100%" id="player1" preload="none" type="video/youtube" src="http://www.youtube.com/watch?feature=player_embedded&v=JUQXileHPQs" />
</div>
<!--the list of videos, each with a 'data-href' attribute storing a link, and the first one already activated as 'currentvideo'-->
<ul class="vidlist">
<li id="vid1" class="currentvideo" data-href="http://www.youtube.com/watch?feature=player_embedded&v=JUQXileHPQs"> <h3> "Cereus Bright"</h3> unplugged, anthemic ballad<br />recorded live in concert</li>
<li id="vid2" class data-href="http://www.youtube.com/watch?v=0RMtebCrJhY"> <h3> "Winds of Change" </h3>upbeat, funky, with upright bass<br />recorded live in studio </li>
<li id="vid3" class data-href="http://www.youtube.com/watch?v=7Ndm2o6p0A8"> <h3>"Some Strange Hold" </h3> melodic song of heartbreak <br /> recorded live (takeaway style)
</li>
</ul>
</div>
JAVASCRIPT:
<script>
//call function the first time
var player = new MediaElementPlayer('#player1');
$('ul.vidlist li').click(function() {
//clear the div of the player
$('div#ytvideo').empty();
//switch the currentvideo classes, to allow styling
$('.currentvideo').removeClass('currentvideo');
$(this).addClass('currentvideo');
//refill the player div, and call the plugin again
$('div#ytvideo').html('<video width="100%" height="100%" id="player1" preload="none" type="video/youtube" src="' + $(this).attr('data-href') +'"/>');
var player = new MediaElementPlayer('#player1');
});
</script>
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/