We Keep Coding

css selector select only the first child text and not the div

I want to use css selector to select only the text (which is in my example "1.42") from this div<div class="one"> for scraping purpose:
<div class="one">
1.42
<div class="nested">..</div>
</div>
I tried this but return the whole <div class="one"> (and I want only the text):
div.one:first-child
and this also:
div.one:first-child:not(.nested)
They all return the text plus the content inside div.nested
EDIT:
I want to use the selector to scrape the specific text using Beautifulsoup
soup.select_one('div.one:first-child:not(.nested)')

You cannot css-select something that isn't inside of a html tag with or without a css class. In your case you should wrap your 1.42 text in a html tag, like a <p>.
That is also best practice, never to print text directly within a div, without a semantic text tag like a p.
Once you have your <p class="...">Text here</p> you can select div:first-child or simply select the p or p.theclassname. Another method is div:nth-child(1).

How to insert image through textarea or html editor?

i have textarea where user can input some text, and this works but the problem arises when he wants to insert the image...
if he put this for example in textarea (Thumbnail image (linked) code)
<img src="http://ultraimg.com/images/2016/08/11/1V6n.md.jpg" alt="1V6n.jpg" border="0" />
when he clicks save button, after that it show the same img code, but there is no image...
so i started to use ckeditor but the situation is the same....
so please tell what i need to ?
Thank you

Instead of textarea, you may use contentEditable.
For limitations and usage take a look to the reported links.
This is an example:
<div contenteditable="true">
<img src="http://ultraimg.com/images/2016/08/11/1V6n.md.jpg" alt="1V6n.jpg" border="0" />
</div>

Getting the title of an image and display it as HTML using JQuery

I have a img which is displaying fine, however I now want to hide the image (display: none) and get the value of its title and display that in its parent div instead, using JQuery. I'm sure it's relatively simple, I'm just drawing a massive mind blank at the moment.
<div class="cardBrand image">
<img class="card-logo" title="Mastercard" src="/hosted/assets/payment-logo/mastercard-debit.png">
</div>

You can insert the title after the image like
$('.cardBrand.image img').after(function() {
return this.title;
}).hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cardBrand image">
<img class="card-logo" title="Mastercard" src="/hosted/assets/payment-logo/mastercard-debit.png">
</div>

var image_title=$('.card-logo').attr('title'); // get title of image
$('.card-logo').hide(); // hide image
$('.cardBrand').text(image_title); // set title in parent div

You can get the title of the image using $('#img-id').attr('title'); and then use it to set the html using $('#div-id').html($('#img-id').attr('title'));
Note : You can use the class also. But, it will change all the div with the same class. It is recommended that you use an id for the div for these purposes

var imgTitle="<span>" + $(".card-logo").attr("title") + "</span>";
$(imgTitle).insertAfter($(".card-logo"));
$(".card-logo").hide();

How to keep text on image slider?

Does anyone know how to keep the text on the image slider?
If the plugins is the solution they should not be heavy it should be easy to understand and implement.

You can add captions under each image using data-captionor in a span after the image.
You can add larger text using the title tag, for example:
<div class="MagicSlideshow">
<img src="example1.jpg" data-caption="Descriptive text can go here." title="Title here"/>
<img src="example2.jpg" data-caption="You can have one or two sets of text, or none at all." title="Another title"/>
<img src="example3.jpg" data-caption="You can also use HTML such as<b>bold</b>,<i>italic</i> and<a href='/magicslideshow/'>links</a>."/>
</div>
Plz refer this one.
Demo

How to show hidden content where the contents images don't load until the content is shown?

What would be a good way to show hidden content with javascript, without having the image elements <img src="myimage.jpg"> of the hidden content load their images in google chrome or any other browsers until the content is actually shown?
hiding the content with the css rule display: none will not prevent the images from loading, and I would like to avoid using ajax calls.

EDIT 1 as discussed in the comments, a better alternative would be to use a template. As an example I picked John Resig’s Microtemplating engine:
<div id="content_container">
<script type="text/html" id="content">
<div>
<img src="..."/>
</div>
</script>
</div>
<button onclick="document.getElementById('content_container').innerHTML = tmpl('content', {});">show div</button>
See fiddle
EDIT 2
As the original poster commented, it's perfectly possible to grab the contents of a <script type="text/html"> element. Templating engine's not necessary:
<div id="content_container">
<script type="text/html" id="content">
<div>
<img src="..."/>
</div>
</script>
</div>
<button onclick="document.getElementById('content_container').innerHTML = document.getElementById('content').innerHTML;">show div</button>
First Answer
(see in edits)

To do what you want within your requirements you could have javascript write the content when you want it displayed. So you would store your HTML in a javascript string and just use script to then insert it into the page when you want it. Its not a very nice way of doing it but it would mean that it would only load images at that point.
Alternatively you could put the HTML in but have the images pointing at nothing (or a blank placeholder, etc.) and then use script to programatically populate the image sources to the correct values when you call the show function to show the page.
Which of these you choose is probably more about readability than anything else though I would favour the second approach (just tweaking the image sources).

First, define a CSS style:
.invisible {
display: none;
}
Add this class to the objects in the HTML. Then anywhere in the JavaScript, simply add or remove the class, or change the display to block or float etc. In jQuery:
http://api.jquery.com/addClass/
http://api.jquery.com/show/
EDIT:
If you don't want the image to load, then use an AJAX call instead.
http://api.jquery.com/jQuery.get/
jQuery.get('myImage.jpg', function(data) {
jQuery('.imageContainer').html(data);
});
EDIT 2:
Load the src into the img once it's needed. You could check the scroll position etc.
http://jsfiddle.net/LYMRV/

Seems like it is possible to hide content using a script tag with type="text/html", it even prevents any images and iframes from loading in the background,
for example:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
document.addEventListener('click',function(e){
if(e.target.id=='content_show'){
e.preventDefault();
document.getElementById('content_visible').innerHTML = document.getElementById('content_hidden').innerHTML;//document.getElementById('content_hidden').text also works
}
});
</script>
</head>
</body>
<img src="image1.jpg"/>
<script type="text/html" id="content_hidden">
<img src="image2.jpg"/>
<img src="image3.jpg"/>
<img src="image4.jpg"/>
</script>
Show Content
<div id="content_visible"></div>
</body>
</html>
Only thing to keep in mind is to avoid placing script tags inside #content_hidden.
Now if anyone is friendly enough to point out every flaw in this method, so that we can all benefit.