I have a website and based on language en, sq or el, I want to change image source. So I have a folder named screenshots then there are three folders: en , sq and el.
For example the URL for a picture named 'slide-phone.png' is:
img/screenshots/en/slide-phone.png
img/screenshots/sq/slide-phone.png
img/screenshots/el/slide-phone.png
On the html text I have a prameter : {{ _('en') }} that can have one of those value: en , sq and el. In this case is en.
<html lang="{{ _('en') }}">
<head>
<script type="text/javascript">
img_url = 'img/screenshots/'+"{{ _('en') }}"+'/slide-phone.png';
console.log("img is:" , img_url);
$('#slide-phone-img').attr('src',img_url);
</script>
The HTML div is like this:
<img id="slide-phone-img" src="" >
The console gives the right link: img is: img/screenshots/en/slide-phone.png but the src attribute is empty!
Why is happening this, I don't get it, can someone help me?
As per my comment, you need to wrap the code in $(document).ready(); closure.
Working example:
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.12.1.min.js"></script>
<script type="text/javascript">
// When document is loaded
$(document).ready(function()
{
img_url = 'https://www.google.co.uk/logos/doodles/2016/st-davids-day-2016-5676738174517248-hp.jpg';
$('#slide-phone-img').prop('src', img_url);
});
</script>
</head>
<body>
<img id="slide-phone-img" src="" >
</body>
</html>
Note: .prop() vs .attr() (why im using prop)
Just get html attribute "lang" value and change image src according to that value.
$(document).ready(function(e){
var language = $('html').attr('lang');
if(language == "en"){
var img_src = "img/screenshots/en/slide-phone.png";
$('#slide-phone-img').attr('src',img_src);
}
else if(language == "sq"){
var img_src = "img/screenshots/sq/slide-phone.png";
$('#slide-phone-img').attr('src',img_src);
}
else{
var img_src = "img/screenshots/el/slide-phone.png";
$('#slide-phone-img').attr('src',img_src);
}
});
You need to execute your script once the document is ready. For example by wrapping it in a $(document).ready handler:
$(document).ready(function()
{
img_url = 'https://www.google.co.uk/logos/doodles/2016/st-davids-day-2016-5676738174517248-hp.jpg';
$('#slide-phone-img').attr('src', img_url);
});
Related
I am working with downloading file inside a thread. My problem is that I cannot assign the file name inside the href and download attribute so when I try to download it it display no file. I tried replacing the href with specific data and it works.
Please help me assign the name of the file I get inside href and download attrib.
Here is my javascript:
$.each(data, function(key, value)
{
var message = value.message;
var cnt = value.count;
var n = message.includes('.jpg') || message.includes('.png') ||
message.includes('.jpeg')|| message.includes('.pdf') || message.includes('.csv') ||
message.includes('.docx') || message.includes('.xlsx');
message = value.message;
$('#divv').append('<a href="uploads/{{"'+value.message+'"}}"
download="{{"'+value.message+'"}}" style="font-weight: bold;"
class="bsi">' +
'<span class="glyphicon glyphicon-download"></span>'+
" "+value.message+'</a>'+
'<i class="bsi_date">'+value.dateReplied+" "+ value.username+'</i>');
getUserFullName(cnt);
}); //each
hi you can use this function
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#?").attr("href", "https://whatyouwant/jquery/");
});
});
</script>
</head>
<body>
<p>whatyouwant.com</p>
<button>Change href Value</button>
<p>Mouse over the link (or click on it) to see that the value of the href attribute has changed.</p>
</body>
</html>
Thanks
<HTML>
<HEAD>
<script>
$(function(){
$(window).on('hashchange', function() {
var hash = location.hash.replace( /^#/, '' );
document.title = 'example ' + hash;
});
$(window).trigger('hashchange');
});
</script>
<TITLE>example</TITLE>
</HEAD>
<BODY>
</body>
</HTML>
Let's say the <title> of example.com is example
This code should automatically update the page title for example.com/#city1 to example city1 and example.com/#city2 to example city2 and so on.
I have only an index.html file and I don't want to add php file to my html file.
As said in the comments you need to add the jQuery library to your page using :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js">
Then your code should work as expected.
I did something like this
<head>
<script src="trans.js" type="text/javascript"></script>
<title><script>trans("Configuration: Status - Software")</script></title>
</head>
However the web title looks like
trans("Configuration: Status - Software")
Why is the js not working here,What should modify to make it work?
Here's what tran.js look like
function trans(key)
{
document.write(getkey(key));
}
function getkey(key)
{
var text;
text = lang_pack[key];
if (text == undefined || text == "")
{
text = key;
}
return(text);
}
I'm not sure you can use a script inside of a title tag -- can you move it into a different block?
It's unclear exactly what trans.js is, but you can try:
<script>
document.title = trans('Configuration: Status -Software');
</script>
You should try setting the title in javascript like
document.title = trans('Configuration: Status - Software');
var temp = document.getElementsByTagName("title").innerHTML;
temp[0].innerHTML = "your new title";
Try including the src in the same script tag as the function call:
<head>
<script src="trans.js" type="text/javascript">trans("Configuration: Status - Software")</script></title>
</head>
Try this:
<head>
<script src="trans.js" type="text/javascript"></script>
<title></title>
<script>document.title = getkey("Configuration: Status - Software")</script>
</head>
You mean this?
<head>
<title>This is Test 1st</title>
<script>
var field = "This is Test 2nd";
$("title").append(field);
</script>
</head>
you need is a jquery library.
Hi all i want to document.write a hyperlink image inside getjson i tried the following but it doesnt work. could you guys tell me what is wrong with my document write?
<script>
$.getJSON('http://anyorigin.com/get?url=http://www.somesite.com/handelit.ashx&callback=?', function(data){
var siteContents = data.contents;
//writes to textarea
document.myform.outputtext.value = siteContents ;
document.write("<a id="ok" href="http://www.mysite.com/master.m3u8?+siteContents+"><img src="./playicon.jpg"></a>");
});
</script>
Hi all i want to document.write a hyperlink image inside getjson
You can't (not reasonably*). document.write only works during the initial parsing of the page. If you use it after the page finishes loading, it completely replaces the page.
Instead, interact with the DOM. Several ways to do that, but the most obvious based on your code is to have the anchor initially-hidden and then show it after filling in the text area like this:
$("#ok").show();
Full Example: Live Copy | Live Source
(I've changed the playicon.jpg to your gravatar, since otherwise it shows as a broken image on JSBin)
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<form name="myform">
<textarea name="outputtext"></textarea>
</form>
<a id="ok" style="display: none" href="http://www.mysite.com/master.m3u8?+siteContents+"><img src="http://www.gravatar.com/avatar/f69cfb4677f123381231f97ea1138f8a?s=32&d=identicon&r=PG"></a>
<script>
(function($) {
$.getJSON('http://anyorigin.com/get?url=http://www.somesite.com/handelit.ashx&callback=?', function(data){
var siteContents = data.contents;
//writes to textarea
document.myform.outputtext.value = siteContents;
// shows the link
$("#ok").show();
});
})(jQuery);
</script>
</body>
</html>
* "not reasonably": IF your content were coming from the same origin as the document (it doesn't look like it is), you could do this with a synchronous ajax call. But that would be very bad design.
Please, use createElement instead of document.write
$.getJSON('http://anyorigin.com/get?url=http://www.somesite.com/handelit.ashx&callback=?', function(data){
var siteContents = data.contents;
//writes to textarea
document.myform.outputtext.value = siteContents ;
//Create A-Element
var link = document.createElement('a');
link.setAttribute('href', 'http://www.mysite.com/master.m3u8?' + encodeURIComponent(siteContents) );
link.id = 'ok';
//Append A-Element to your FORM-Element
var myForm = document.getElementsByTagName('form')[0];
myForm.appendChild(link);
//Create IMG-Element
var img = document.createElement('img');
img.setAttribute('src', './playicon.jpg');
//Append IMG-Element to A-Element (id='ok')
link.appendChild(img);
});
I need to output a DIV width into a URL for an iframe but am having some trouble. I have managed to get java to output the div width, but encounter a problem when getting this into the URL. Below is the code I am using (notice the width=
<iframe src="http://www.coveritlive.com/index2.php/option=com_altcaster/task=viewaltcast/altcast_code=3f43697a78/height=670/width=<script language='javascript'>var e = document.getElementById('Single2');
document.write(e.offsetWidth);</script>"></iframe>
This outputs the URL as:
http://www.coveritlive.com/index2.php/option=com_altcaster/task=viewaltcast/altcast_code=3f43697a78/height=670/width=var e = document.getElementById('Single2');
document.write(e.offsetWidth);
As you can see the URL has the full javascript in, not just it's output.
Ideally the URL should be as such (lets assume the DIV width is 650px).
http://www.coveritlive.com/index2.php/option=com_altcaster/task=viewaltcast/altcast_code=3f43697a78/height=670/width=650
Any ideas how I can get this working?
You should do this in the following way (pseudo code)
<iframe id="myIframe"></iframe>
<script>
document.getElementById("myIframe").src = ... // construct URL here
</script>
Let me know if you need a working example.
Here is a working example
<head>
<script type="text/javascript">
function changeContent()
{
console.log("changing src");
var myIframe = document.getElementById("guy");
myIframe.src = "http://steps.mograbi.info/users/sign_in?unauthenticated=true&width=" + myIframe.offsetWidth;
}
</script>
</head>
<body>
<iframe id="guy"></iframe>
<script>
document.onload = changeContent();
</script>
</body>
If you track the network, you will see the width passing..
You can't put <script> tag in src, it will be treated as String.
<iframe id="myiframe"></iframe>
<script type='text/javascript'>
var e = document.getElementById('Single2');
var url = "http://www.coveritlive.com/index2.php/option=com_altcaster/task=viewaltcast/altcast_code=3f43697a78/height=670/width=" + e.offsetWidth;
document.getElementById("myiframe").setAttribute("src",url);
</script>