Develop Reference

How to Replace Part of Style Background:url in Blogger Widget

Firstly, apologies, I'm a complete novice, I'm sure I'll be using the wrong terminology somewhere.
I am trying to increase the resolution of the images in my Recent Posts widget and Random Posts widget.
I need a piece of code that replaces part of the "background:url" of "a class="mag-thumb", the code needs to replace "/s72-c/" in the url with "/s300/"
e.g.
https://4.bp.blogspot.com/-0STAMmB_Qws/W3bMkXzc2aI/AAAAAAAAKec/zxATGYlKdFM61Y343kTGa1C5FNli11Y9ACLcBGAs/s72-c/s_tronic2_en__download.jpg
would become
https://4.bp.blogspot.com/-0STAMmB_Qws/W3bMkXzc2aI/AAAAAAAAKec/zxATGYlKdFM61Y343kTGa1C5FNli11Y9ACLcBGAs/s300/s_tronic2_en__download.jpg
I am using this theme -> https://www.themexpose.com/2017/09/seoboost-best-seo-optimized-blogger.html
On a test blog here -> https://andybuckdetailing.blogspot.com/
There is already a piece of jQuery code running on the site to do exactly what I want, but only for the Popular Posts widget. However, due to the way the Popular Posts widget is written I can't just copy and modify for the Random and Recent Posts widgets.
Popular Posts has an img src, whereas Recent Posts uses a style background.
Thanks so much in advance for your help!
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
var dimension = 150;
$('#PopularPosts1,#PopularPosts2,#PopularPosts3').find('img').each(function(n, image) {
var image = $(image);
image.attr({
src: image.attr('src').replace(/s72-c/, 's' + dimension)
})
})
});
//]]>
</script>
I've tried #Bassam 's solution below, but may have input it into the code incorrectly, I placed it directly below the script above, formatted like this:
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$('.mag-thumb').each(function () {
var img = this.style.background;
this.style.background = img.replace('/s72-c/', '/s300/');
});
//]]>
</script>
Second try at #Bassam 's solution.
</div>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$('.mag-thumb').each(function () {
var img = this.style.background;
this.style.background = img.replace('/s72-c/', '/s300/');
});
//]]>
</script>
</body>
Third try at #Bassam's solution, this one's live on the test blog linked above if that helps anyone determine why it's not working.
</div>
<script>
//<![CDATA[
$('.mag-thumb').each(function () {
var img = this.style.background;
this.style.background = img.replace('/s72-c/', '/s300/');
});
//]]>
</script>
</body>

Use this to manipulate background attribute of .mag-thumb
<script>
//<![CDATA[
document.onreadystatechange = function () {
if (document.readyState === 'complete') {
$('.mag-thumb').each(function () {
var img = this.style.background;
this.style.background = img.replace('/s72-c/', '/s300/');
});
}
}
//]]>
</script>

when use online its working correctly .. what do i have to include to make jquery work?

http://jsfiddle.net/Kh2fz/
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js">alert("sfd");
</script>
<script>
var $elements = $('#fp-slides div');
var total_elements = $elements.length;
var element_with_class = 0;
window.setInterval( function () {
$elements.eq(element_with_class).removeClass('current');
element_with_class += 1;
if ( element_with_class === total_elements )
{
element_with_class = 0;
}
$elements.eq(element_with_class).addClass('current');
}, 400 );
this is not working. when i compied its not working... but works just fine in online compiler..

Just put your script after the HTML and it will work!

Download the jQuery javascript file an the css file from the jQuery website.
Then insert this code into your head section of your html site:
<link type="text/css" href="your path /your jQuery css file name.css" rel="stylesheet"></link>
and for js insert:
<script type="text/javascript" src="your path/your jQuery js file name.js"></script>
Look that the path is correct and keep attention for the writing.
then it should work.
greethings

Onclick event, print divs. how to Exclude class name

This question is a little add for this Stackoverflow question Here I ended up with this code.
<script type="text/javascript">
//Simple wrapper to pass a jQuery object to your new window
function PrintElement(elem){
var data = '';
$(elem).each(function() {
data = data + $(this).html();
});
Popup(data);
}
//Creates a new window and populates it with your content
function Popup(data) {
//Create your new window
var w = window.open('', 'Print', 'height=400,width=600');
w.document.write('<html><head><title>Print</title>');
//Include your stylesheet (optional)
w.document.write('<link rel="stylesheet" href="add/css/layout.css" type="text/css" />');
w.document.write('<link rel="stylesheet" href="add/css/main.css" type="text/css" />');
w.document.write('</head><body>');
//Write your content
w.document.write(data);
w.document.write('</body></html>');
w.print();
w.close();
return true;
}
</script>
that when i tricker the
onclick="PrintElement('.PrintElement')">Print
I can print out some divs with the class="PrintElement" my question is now...
If i have some elements inside the DIV that i dont want to print out, how can i then add a class="NOprintelement" so the code know that the elements with this class, need to be excluded in the print event ?

Without knowing more details, you should probably try to hide DOM elements using css media queries. For example, if you have a div with class = 'hideWhenPrinting', your CSS could include:
#media print {
.hideWhenPrinting { display: none }
}
See this related question:
How do I hide an element when printing a web page?

Set entire page's css on click?

Does anyone know how I can change the entire document's CSS file on click? I've searched around but only found a few results on setting a class/ID's CSS, not the entire document. My website has two themes, light/dark, and I want to load up "light.css" or "dark.css" from two links.
Thanks.

You need to change the src of the the link tag, which controls the styles. For example, you probably have this in your head tag:
<link rel="stylesheet" href="light.css">
You need to change the href attribute of the link tag to "dark.css" when you click something. You can do that like this:
document.getElementById('id-of-element').addEventListener('click',function(){
document.getElementsByTagName('link')[0].setAttribute('href',isDark?'light.css':'dark.css');
isDark=isDark?false:true;
}
IMPORTANT: you need to set isDark to false or true before this code, depending on whether the page is supposed to be dark or light in the beginning. You also need to change id-of-element to the id of the element that should be clicked to toggle the state of the page.
I think this is better than the other answers because it is simpler and uses no jquery.
EDIT: I accidentally had the src attribute instead of the href one before. I now updated it to be correct.

Yeah, you can do using theming. But the changing of CSS is limited to the <body> tag.
$("a.theme").click(function(){
$("body").addClass("dark");
});
I have used jQuery library to make the coding easier. And it is not a good idea to switch CSS rather, you can change the classes.
Demo
You can check out the working demo in jsBin.
Check out this answer for more details: Selecting a web page look and feel without reloading, with one CSS.

Try something like this:
Light
Dark
<script type="text/javascript" charset="utf-8">
$('a#light, a#dark').click(function(){
$('style').remove();
$.ajax({
url:'http://www.example.com/' + $this.attr('id') + '.css',
success:function(data){
$('<style></style>').appendTo('head').html(data);
}
})
})
</script>
Of course, you need to load jQuery first.

There's 2 ways that come immediately to mind.
1) Add a style tag to the page's head, ensuring that the style tag has a unique id. You can then set the innerHTML of that element. (somewhat messy)
2) Add a link tag to the page's head, also ensuring that it has a unique id. You set the type='text/css' and the rel='stylesheet' attributes. You the set the src of this link element to the appropriate css file.
Here's an example of each type. Just supply css files for theme3() and theme4() functions.
Example:
<!DOCTYPE html>
<html>
<head>
<script>
function byId(e){return document.getElementById(e);}
function newEl(tag){return document.createElement(tag);}
function newTxt(txt){return document.createTextNode(txt);}
function toggleClass(element, newStr)
{
index=element.className.indexOf(newStr);
if ( index == -1)
element.className += ' '+newStr;
else
{
if (index != 0)
newStr = ' '+newStr;
element.className = element.className.replace(newStr, '');
}
}
function forEachNode(nodeList, func)
{
var i, n = nodeList.length;
for (i=0; i<n; i++)
{
func(nodeList[i], i, nodeList);
}
}
window.addEventListener('load', mInit, false);
function mInit()
{
var style = newEl('style');
style.setAttribute('id', 'dynCss');
document.head.appendChild(style);
var style2 = newEl('link');
style2.setAttribute('type', 'text/css');
style2.setAttribute('rel', 'stylesheet');
style2.setAttribute('id', 'dynCss2');
document.head.appendChild(style2);
}
function theme1()
{
var style = byId('dynCss');
style.innerHTML = "h1{color: red;}";
var style2 = byId('dynCss2');
style2.setAttribute('href', '');
}
function theme2()
{
var style = byId('dynCss');
style.innerHTML = "h1{color: blue;}";
var style2 = byId('dynCss2');
style2.setAttribute('href', '');
}
function theme3()
{
var style = byId('dynCss');
style.innerHTML = "";
var style2 = byId('dynCss2');
style2.setAttribute('href', 'style3.css');
}
function theme4()
{
var style = byId('dynCss');
style.innerHTML = "";
var style2 = byId('dynCss2');
style2.setAttribute('href', 'style4.css');
}
</script>
<style>
</style>
</head>
<body>
<h1>This is the heading</h1>
<input type='button' onclick='theme1();' value='Theme 1'/>
<input type='button' onclick='theme2();' value='Theme 2'/>
<input type='button' onclick='theme3();' value='Theme 3'/>
<input type='button' onclick='theme4();' value='Theme 4'/>
</body>
</html>

Show/hide an image using setInterval (and where do I place the code?)

I need some help on writing the appropriate JavaScript and on where to place it. What I want to do is pretty simple...
I want to hide a div when the page is first loaded and then have it display permanently after a set interval (let's call it 10 minutes). I've looked all over and from what I can tell, I need to use the setInterval or setTimeout function.
Two problems...
I don't know JavaScript, so I'm just trying to hack this together
I'm using WordPress and I have no idea where the script would need to be placed for this to work.
Any ideas?

<!DOCTYPE html>
<html>
<head>
<style>
#my_div {
display:none;
}
</style>
<!-- remove noscript if you don't want it displayed if JS is off -->
<noscript>
<style>
#my_div {
display:block;
}
</style>
</noscript>
</head>
<body>
<div id="my_div">the hidden div</div>
<!-- More HTML content -->
<!-- JavaScript just before the end of the body -->
<script type="text/javascript">
setTimeout(function() {
var el = document.getElementById('my_div');
if( el )
el.style.display = 'block';
}, 600000); // 10 minutes
</script>
</body>
</html>

Grab the window.onload event, hide the div immediately, then call setTimeout to show it again:
window.onload = function(){
var divToHide = document.getElementById("divId");
divToHide.style.display = "none";
setTimeout(function() { divToHide.style.display = "block" }, 600000);
};

PHP does not deal with showing and hiding elements once they have been loaded on to page. That is exclusively javascript's domain. So...
Locate your theme folder. So first check which theme is active in admin -> appearance -> themes, then go to the folder in your FTP: wp-content/themes/yourtheme
Locate and open header.php
add the following right before the </head> tag:
<script type="text/javascript">
window.onload = function(){
var $img = getElementById('myimage');
$img.style.display = 'none';
function showImg() {
$img.style.display = ''
}
setTimeout("showImg()",3000);
}
</script>
the "3000" is the time in milliseconds that you want to delay. You also need to give your image an ID:
<img src="myimage.jpg" id="myimage" />