I have tried to load an svg from server and show it into an html element using jQuery like as follows,but it does not show the svg,what is wrong with this code?
I know it can show using <img> tag,but i need to write some events on the svg elements.
$.get( "http://example.com/_assets/img/gptest.svg", function( data ) {
$( "#svg-main" ).append( data );
});
<div id="svg-main"></div>
Why don't you just add an img-tag?
<img src="http://example.com/_assets/img/gptest.svg">
If you want to add it via jQuery do it like this:
$('#svg-main').append('<img src="http://example.com/_assets/img/gptest.svg">');
Here is a handy article about svg.
Basically you need to define width nad height in order ot display svg image.
So that's probably why it is not displaying in your case.
Related
I am working on JSP project using Bootstrap for front end.
I have a query about html design. How to replace the Div tag with another div tag on same place without redirecting to other page using bootstrap..?
Consider gmail as an example. It replaces the mails list div with the e-mail data div when you click a particular mail..
Please give me a solution.
I will assume you have jQuery since you use Bootstrap. You have to use an Ajax call, and load the content of the call inside your div:
$.get( "yourpage.html", function( data ) {
$( "#result" ).html( data );
});
Where 'result' is the id of your div
You probably want to wrap this inside an onClick event.
I'm using Bludit CMS to build a simple website. The only task I could handle is to add a D3 Graph into the site. My Graph and the code looks pretty like this: http://bl.ocks.org/mbostock/1093130
The graph is displayed at the position, where I insert the script tag of the graph. The problem is, that I'm not able to add a script tag in Bludit CMS, only HTML.
Now, I thought about adding an empty div tag with an id to my CMS editor like
<div id="myGraph">
</div>
and add the graph programmatically to this div. How can I do that?
One further note: I want to try to do it only with Javascript without using jQuery. I don't want to include jQuery to my page only to add a graph to my website.
If you can't add JavaScript to a page you won't be able to use D3.
If you can load in code from an external file then use:
<script src="myfile.js"></script>
If you can only add it to every page rather than just one then check for your id and then execute the code.
if( d3.select("#myGraph") ) {
var svg = d3.select("#myGraph")
.append( "svg")
.attr("width", 1000)
.attr("height", 1000);
// Do stuff with SVG.
}
I need to locate an element and grab an entire block of HTML.
I tried this:
$(this).find('h1').html();
But only was able to capture the text withing h1 tag... What am I missing?
Here's a simple plugin. Use it as follows:
$(this).find('h1').outerHtml();
If you don't want to depend on the plugin, here's a solution with less code, but not as efficient:
var html = $('<div />').html( $(this).find('h1').clone() ).html();
Here's the fiddle: http://jsfiddle.net/nxfTf/
You could try this.
$(this).find('h1')[0].outerHTML
I did this fiddle, if you need something a little more visual: http://jsfiddle.net/aPGGS/
I have a string of HTML that I use as jQuery input document.
// the variable html contains the HTML code
jQuery( html ).find( 'p' ).each( function( index, element ) {
// do stuff
});
Though, I keep getting errors that the images doesn't exist (in my variable html). The images in the HTML have relative URL's which doesn't correspond to images on my host, so naturally, they can't be found so I get 404 errors in my console.
Is there a jQuery-way to avoid jQuery loading the images? If not, I'll have to find all images and replace the src using non-jQuery which is a bit sad because that's exactly where jQuery comes in handy :p
Edit:
I'll explain step by step.
I have a variable, html, that contains some HTML code from another site. I put that variable in the jQuery constructor, because I want to perform actions on that HTML.
jQuery( html );
At this point I get 404 errors because the images in the HTML source are relative; they don't correspond to the images I have on my host.
I can't use jQuery to remove the src tag, because I still get errors
Writing a bit of javascript to modify the src value is plain silly; this is why I use jQuery
So, again, all I'm asking is if there's a setting or whatever that avoids jQuery from loading the images in the supplied source.
Thank you.
To stop images loading you need to modify html before creating jQuery( html ) object. You can use jquery for that also.
var newhtml = html.replace('src=','nosrc=');
jQuery( newhtml ).find( 'p' ).each( function( index, element ) {
// do stuff
});
right after you get the html - replace the src to something else ()maybe to your own picture [global url]. ( simple string replace)
this will help you not to get the 404 - not found error in the console.
also you can make the html as jQuery - and set all the $("img") with your SRC or remove it if you want.
tell me if thats what you after.
edit
what about
$("img").removeAttr("src");
edit2
string html = #"
<h1>
<img src="" ... >
</img>
<img></img>-bad
<img/>-bad
<img src="" ... />
</h1>";
string result = Regex.Replace(html, #"<img\s[^>]*/>", "", RegexOptions.IgnoreCase);
I want the browser (mobile webkit especially) to NOT download images that are inside display:none divs. Right now, they get downloaded and not rendered.
Is there a jquery plugin to do this?
you can use data-* attributes. that way, you can have jQuery load them on demand:
<img data-source="image_path">
//this one gets all images and loads them
$('img').each(function(){
//loads the source from data-source
this.src = this.getAttribute('data-source');
});
<img data-source="image_path" class="foo">
<img data-source="image_path" class="foo">
//this one gets all images that have class foo and loads them
$('img.foo').each(function(){
//loads the source from data-source
this.src = this.getAttribute('data-source');
});
ofcourse you need to wrap this in a function so that you can call which images on demand. like:
function loadImg(selector){
$(selector).each(function(){
this.src = this.getAttribute('data-source');
});
}
//load images with class foo:
loadImg('.foo');
I don't think so. To be sure, you would need your original HTML DOM to exclude the hidden images, which you could do with server-side programming based on user agent sniffing (although that is not recommended). Modifying the DOM after document.ready or document.load will mean that the browser has already had a chance to request assets from the server even if they might not be displayed.
It would be unusual but if you still want to use jQuery you could follow #Pointy's advice and make all images placeholders in your markup. Then replace the :visible placeholders with the images you want using an attribute as the data source. No plugin is needed, just use something like replaceWith() or attr() to swap out the placeholder node for the image you want downloaded or change the src attribute.
I would use a 1x1 transparent gif as the placeholder with the correct height and width attributes rather than no source <img> for a placeholder. That way the page flow will be determined correctly when the page renders so it won't jump around as your images lazily load.