Is there a way to dynamically change the content inside the tag?, throught jquery or javascript?
I am not using php or any server side script. I am using backbone.js and hence i have a .html file.
I have come to a situation where i would need to type in base path.
Like
<base href="www.google.com" />
I have searched around and i havent got anywhere.
Probably this is not possible at all, but just wanted to check it here in stackoverflow.
Using jQuery. Here is jsFiddle I've made http://jsfiddle.net/uQVeN/
HTML:
<base href="www.google.com" />
<div id="valueBefore"></div>
<div id="valueAfter"></div>
JS:
$(document).ready(function(){
$('#valueBefore').text( $('base').attr('href') );
$('base').attr('href','kjhsgdkjahgdjkahgdf');
$('#valueAfter').text( $('base').attr('href') );
});
Will produce:
www.google.com
kjhsgdkjahgdjkahgdf
Related
i have an html page with alot of links using a tag. i want to open all links in different tabs, instead of setting target="_blank" in all a tags, is there anyway to do it like below in css:
a{target="_blank";}
can anyone please tell, thanks in advance.
Specify a default target for all hyperlinks and forms on a page:
<head>
<base target="_blank">
</head>
source
you can also add a small script
<script>
document.querySelectorAll('a')
.forEach(function(elem) {
elem.setAttribute('target', '_blank');
})
</script>
If all code is in a single HTML file it would be easiest to run CTRL/CMD+F and add target="_blank"to them. This would be very easy to so in Sublime Text for example.
This could also be easily accomplished with PHP.
Usually, CSS is used to style the HTML markup; therefore I see no real value in adding the target with CSS.
I suggest you think about if you actually want to use target="_blank" on all links as this is generally considered bad practice. See https://www.searchenginejournal.com/when-not-to-use-target_blank-link-attribute/19924/
Also, always use rel="noopener" or rel="noreferrer" to your target="_blank" as omitting these is a security risk! See https://web.dev/external-anchors-use-rel-noopener/
So this:
<html>
<head>
<style>
img{href:self}
</style>
</head>
<img src="./Sampleimage"/>
</html>
would basically be the code I need, but since I don't know how or even if there is an option to do this, I figured, I have to ask someone more intelligent than me.
I kinda have to do this because I have about 200 images in this html Document, and every single one of them has to link to itself. So a seperate <a> tag for every image wouldn't be very stylish.
Expanding off of WillardSolutions' comment...
document.getElementById("myImg").addEventListener("click", function() {
window.open(this.getAttribute("src"));
});
.clickable {
cursor: pointer;
}
<img id="myImg" class="clickable" src="https://www.w3schools.com/images/compatible_chrome.gif"/>
Open your browser console to see the opening of the URL being blocked...
If you want it to open in a new window/tab use:
window.open(this.getAttribute("src"), '_blank');
Nice idea, but no, as the commenters above have explained.
What you can do is get the source URL of each image using jQuery and append it to the parent <a> element. I would do this on page load rather than on clicking the image, as then the images are ready to click.
I would also suggest using a thumbnail version of the image, otherwise it will take ages for the page to load. (If you do that, you will need to put all the thumbnails in a subdirectory and then remove that subdirectory from the link URL using a replace function).
$( document ).ready(function() {
$("img").each(function(){
var imgUrl = $(this).attr('src');
$(this).parent().attr('href', imgUrl);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a><img src="https://cdn.pixabay.com/photo/2018/12/15/02/53/flower-3876195_960_720.jpg" width="200"/></a>
Don't use JS for this simple solution...
<a href="image-src.ext">
<img src="image-src.ext"/>
</a>
if you want the image to be downloadable add the download attribute to <a>. It is really no problem and the faster performance solution. And about 'stylish'... forget about stylish in coding :D
This might be the solution you are looking for.
Here is the fiddle. https://jsfiddle.net/RadekD/bgfpedxv/1/
HTML
<img class="image" src="https://placeimg.com/100/200/nature" />
<img class="image" src="https://placeimg.com/200/200/nature" />
<img class="image" src="https://placeimg.com/300/200/nature" />
JS
var images = document.querySelectorAll('.image');
images.forEach(function(element) {
element.addEventListener("click",function(){
window.location.assign(element.src);
});
});
i have a porlet running in liferay portal.after successfully entering the details , i want to download the details in an html page , in which i have to include an image.
this is done by giving the absolute path as:
<img src="http://localhost:8080/Demo-portlet/images/logo-1.jpg"
and it works fine.
My portlet structure is :
Demo-portlet-->docroot-->images-->logo-1.jpg
Now i want to do this by using relative path. i tried as below but it didnt work out:
<img src="../Demo-portlet/docroot/images/logo-1.jpg" />
<img src="./docroot/images/logo-1.jpg" />
<img src="./images/logo-1.jpg" />
None of the above worked. please tell me how this can be done.
Adding the html path:
Demo-portlet-->docroot-->download.html
Try this:
<img src="images/logo-1.jpg" />
Your portlet can be embedded on random pages. It's the page's URL that you need to be relative to, not the portlet.
If you have your portlet on http://localhost:8080/web/guest/home or http://localhost:8080/web/guest/about-us/contact/addresses, the relative address would need to be different. Thus I'd recommend to be relative with regards to the server name, but not with regard to the embedding URL: At development time you have no clue what name the pages that embed your portlet will have.
Go with <img src="/Demo-portlet/images/logo-1.jpg" /> or look up the servlet context (e.g. replace "/Demo-Portlet" with a dynamic value, so that you don't have to hard-code it).
(sorry, IDE not running and I'm always mixing up if it's request.getServletContext() or something else - try for yourself and comment here, I'll edit this answer when you give the full code). The dynamic stuff - on a jsp - would be <img src="<%=request.getServletContext()%>/images/logo-1.jpg" />
so I have a strange request. I've been working on some security project for school, and I've been able to successfully inject some html code using a form on our test site. What's interesting is that it only accepts the html code as one line and with no spaces. This brings me to my question, so far I've only been able to get text and font color changes to work. But I want to see if someone could inject images/audio/video.
I'm trying to figure out how to turn this:
<img src="http://www.rtur.net/blog/image.axd?picture=2011%2F12%2Fcss.png"/>
Into this:
<imgsrc="http://www.rtur.net/blog/image.axd?picture=2011%2F12%2Fcss.png"/>
but add a space with code.
I've tried adding the but that only works with actualy text and not the tag itself. Any help is appreciated.
Interesting note: I was able to inject <font size="50" color="red"></font>
But I have no idea why that works but the image doesn't.
Have you tried the following?
A slash:
<img\ src="http://www.rtur.net/blog/image.axd?picture=2011%2F12%2Fcss.png"/>
Using a non-traditional closing tag:
<img src="http://www.rtur.net/blog/image.axd?picture=2011%2F12%2Fcss.png"></img>
Injecting a blank <img> tag:
<img src=""/>
Here's another solution: Try inline CSS:
<div style="background:url(http://www.rtur.net/blog/image.axd?picture=2011%2F12%2Fcss.png);height:400px;width:400px"></div>
See this fiddle: http://jsfiddle.net/9MYrM/
In another question, "Using Google Map with ColdFusion", I ran into a problem of not able to display a google map using CF. After much experimenting, I found out that if you use ColdFusion.navigate to point to a page from one cflayoutarea to another cflayoutarea, the map in the destination cflayoutarea would not show. (However, if you just run the page, both by itself or when it is inside the destination cflayoutarea, the map will show)
So my question now is: is there an alternative approach where I don't need to use coldfusion.navigate to navigate from one cflayoutarea to another?
Your English isn't great, so I'm going to paraphrase to a question that makes sense (to me) and answer that question...
It sounds like you have 2 CFLayoutArea's, and you want to have a link (or button, etc) in one of them that will change the contents of the other.
If you're eliminating ColdFusion.navigate as an option, then it seems to me you're going to have to try one of a few other options that are all basically the same thing. I like jQuery. If you don't like jQuery, you can use another library, or roll your own solution, but they will all do the same job.
Since this code:
<cflayout name="foo" type="hbox">
<cflayoutarea name="nav">nav</cflayoutarea>
<cflayoutarea name="content">content</cflayoutarea>
</cflayout>
Produces this HTML:
<div id="foo">
<div id="nav" style="overflow:auto;float:left;">
nav
</div>
<div id="content" style="overflow:auto;float:left;">
content
</div>
</div>
You can use the ID attribute of the content DIV, with jQuery, to change its contents:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#goLink").click(function(e){
$("#content").load("content.cfm");
e.preventDefault();
});
});
</script>
<cflayout name="foo" type="hbox">
<cflayoutarea name="nav">go</cflayoutarea>
<cflayoutarea name="content">content</cflayoutarea>
</cflayout>