I'm working on my company's webpage. This is my first serious webpage and lots of doubts came at each line. Now I'm working on a News loading system, and I've one that can't solve:
I'm loading my news with jquery load, attaching elements to previously defined vars:
var newArticle = $('<div id="news-article"></div>');
var newArticleChild = newArticle.children(); //'cause i want to load articles inside #news-article, not <a></a>
var image = $('<div></div>');
var title = $("<div></div>");
var tag = $("<div></div>");
$(image).load(path + i + ".html #main-image");
$(title).load(path + i + ".html h1");
$(tag).load(path + i + ".html #tag");
$("#news").append(newArticle); //Apend articles parent to an existing page element
newArticleChild.append(image);
newArticleChild.append(title);
newArticleChild.append(tag);
HTML --------------
<div id="main-image" style="background-image: url(../../assets/images/NewsBackgroundTry.png);
"></div>
I don't really like this because it creates emty divs with another div inside, but this is not a mistake itself.
I don't really need to append image to my page, because what i want from it is it's style, that contains the path to the image in css. I'm doing this this way because I need to apply background-size: cover; style to that image.
My question is, how i can get the background-image style from image variable? I've tried lots of things and looked at as many posts as i found about it, but i can't get this value...
If the solution prevents from appending image to page, it would be much better.
Thanks everyone, Abel!
you could use var bgImg = image.css('background-image'); to get that css property and then replace the nasty url('') part to get just the image path.
Related
I'm making an extension that grabs an image URL within the "uCW" div on an HTML page.
Currently, I have:
var uCW = jNode.closest("div._q7o");
var image = uCW[0].children[1].getElementsByTagName("img")[0].src;
console.log(image);
That finds the image by going into the div/children and pulling the image. Unfortunately, this method is problematic, since it stops working if the children change, which they regularly do.
Instead, I want to select the image by searching the div and all its children (there are a lot of them) for the first image/string that starts with "https://external" (all the images I want start this way, and that doesn't seem to change.)
This is what I tried:
var uCW = jNode.closest("div._q7o");
var image = $(uCW).find([name^="https://external"]).src;
console.log(image);
This doesn't work. The console just prints "undefined."
You could do it like this, if ucw is a classname (if it's an id, you would write $("#ucw") instead):
var image = $(".ucw").find('[src^="https://external"]').attr("src");
console.log(image);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="ucw">
<img src="https://external/1.jpg"/>
</div>
If your images have a name attribute with the source of the image as value, you can also adjust your attempt to fetch the images via their name attribute like you did:
var image = $(".ucw").find('[name^="https://external"]').attr("src");
This question has already been asked, but has no answer - I believe because not enough information was provided.
I am using the bxslider as my template. See here:
http://bxslider.com/examples/image-slideshow-captions
I can create a very simply caption using the "title" attribute, but I want to be able to create subtitles (with different attributes like smaller text) and I want to turn this into a link. I've tried implementing a div within the container, and perhaps obviously, I can't get that to sync with the slider without implementing it with jquery. I've also tried editing the CSS to no avail.
How can I add a caption that more than just an image title? Like a div overlaying the picture?
You don't even need to use the captions option provided by bxslider.
Add the captions as part of the li tag that forms your slide. That's what the captions:true option does anyways, i.e appends the div with bx-caption class to your slide.
For eg:
<li>
<img src="http://bxslider.com/images/730_200/hill_trees.jpg" />
<div class="caption1">
<span>Image 1</span>
<div class="caption2"><a id="img1a" href="#">Visit Australia</a></div>
</div>
</li>
This way using css, you can play around with the font sizes too.
Here's the the fiddle http://jsfiddle.net/s2L9P/
I think I solved your problem, but I can't test it because your fiddle doesn't work as you created it.
Change the code from Appends image captions to the DOM with this:
/**
* Appends image captions to the DOM
* NETCreator enhancement (http://www.netcreator.ro)
*/
var appendCaptions = function(){
// cycle through each child
slider.children.each(function(index){
// get the image title attribute
var title = $(this).find('img:first').attr('title');
var nc_subtitle = $(this).find('img:first').attr('nc-subtitle');
// append the caption
if (title != undefined && ('' + title).length && nc_subtitle != undefined && ('' + nc_subtitle).length) {
$(this).append('<div class="bx-caption"><span class="title">' + title + '</span><br/><span class="nc_subtitle">' + nc_subtitle + '</span></div>');
}
});
}
Now you can add subtitles to your caption titles:
<a href ="page.php">
<img src="http://calindragan.files.wordpress.com/2011/01/winter.jpg" title="title 1 here" nc-subtitle="The second title"/>
</a>
You can style the subtitle as you want to, using the CSS class nc_subtitle.
Hope it helps!
EDIT
Change the entire JavaScript shared by you in fiddle with this:
http://pastebin.com/0fvUezg1
And the HTML with this:
http://pastebin.com/T038drDV
It works.
I have a container div containing some html - for example:
<div id="container">
<h1>Bla bla</h1>
<div class="myItem"></div>
Send
</div>
and some css related to the container:
#container {background:red;}
#container h1 {font-size:30px;}
#container .myItem {color:red;font-size:12px;}
I would like to store all the html inside the container and all the related css to it in some variable/database/whatever is available, and then load it back on a new page. The content is dynamic and it's up to the user to style the container and it's content.
How could I accomplish this? One way I was thinking was to retrieve all this properties using javascript and than store them somehow in the database to load them back later or try to do this with html5 webstorage.
Is there any plugin that does this?
EDIT:
I've also tried html2canvas but it's support for css3 is not good enough to render the elements correctly.
If the CSS and HTML are both stored within the page, you can just grab the content (based on the wrapper) and store it in localStorage (if this works for your purpose).
An example with jQuery and localStorage... you will need to change where things are being saved from to fit your case.
jsFiddle
Saving the items:
var html = $('#container').html();
localStorage.setItem('html', html);
var css = $('#csscontainer').html();
localStorage.setItem('css', css);
Pulling/showing the items:
var showHtml = localStorage.getItem('html');
var showCss = localStorage.getItem('css');
$('#showHtml').html(showHtml);
$('#showCss').html(showCss);
I am trying to implement a webpage which should have expected to have the following properties.
The HTML page contains many lines of text (thousands of lines), basically a log file.
Upon a desired action, line which is related to the action should be highlighted and shown . (exactly the way that would happen if you click on corresponding source button of a logged variable in chrome inspect element.)
This seems to be very basic but I couldn't figure out how! May be I am missing some literary terms.
Thank you.
You need to do a few things:
$("li").each(function(i, element) {
var li = $(element);
if (li.text() == "Orange") {
li.addClass("selected");
// Get position of selected element relative to top of document
var position = li.offset().top;
// Get the height of the window
var windowHeight = $(window).height();
// Scroll to and center the selected element in the viewport
$("body").scrollTop(position - (windowHeight/2));
}
});
See DEMO.
There are many ways to go about this. But is there any class tags in the logged source or is just one large text block?
If there are class or id tags on the html you can use javascript or jquery to do this.
document.getElementById('myText');
or in jquery
var element = $("#myText");
//example css changes
element.css("position","center");
element.css("color","red");
Then change the css style on those html elements.
Is there a way to get an image from an outer webpage with javascript code?
I'll explain:
I have a website, lets say www.one.com, and I want to show in this website's homepage an image that exists in another website, lets say www.two.co.il
Can I do it?
Try this:
var img = document.createElement("img");
img.src = "http://www.two.co.il/image.jpg";
document.body.appendChild(img);
A convenient thing is to create first a placeholder in your HTML:
<div id='externalImage'></div>
because it will not disrupt the function if the layout changes and allows precise placement.
As for the real question on how you put an image, assuming from the tags that you use Jquery:
$("#externalImage").html("<img src=\"http://put.url.here/image.jpg\" />");
if you want to insert it into the aforementioned placeholder. Otherwise to plainly add the image to the document you can append it to the documentd BODY or elsewhere using document.body.appendChild like in the other answers.
Yes.
var image = document.createElement('img');
image.setAttribute('src', 'http://www.two.co.il/foo.jpeg');
image.setAttribute('alt', 'something suitable');
document.body.appendChild(image);
So long as you aren't trying to get content from the other site into JS (you aren't, you are create an img element in the DOM, JS has no further involvement), you won't run into the Same Origin Policy.
or simply:
$("<img src='" + imgUrl + "' alt='" + altText + "'>").appendTo("body");
make a div and give id = "div1" with height and width
<div id='div1' height='100' width='100'></div>
$('#div1').css('background-image, 'http://www.two.co.il/urImage.jpg');
it is shortest way to apply image