I used JavaScript to modify some style on the page and then alert the modified style. In IE v7, though the alerted message shows that the change has been made, visual rendering of the page shows no difference. The same code however works fine in FF. What could the reason be? Another thing i noted is when i used a developer toolbar's script console I was able to get the expected results but not when i put the js in a script tag.
Sample Code -
function change()
{
var text=document.getElementsByTagName("h2");
var i=0;
var p=text[0];
while(p)
{
alert(p.style.cssText);
p.style.cssText="color:#565656;";
p.innerHTML="Changed";
alert(p.parentNode.innerHTML);
i++;
p=text[i];
}
}
This was simply put in a script tag and put inside body just to test. The change made to innerHTML or style is not reflected in IE browser window though the later JavaScript alert shows the change.
Instead of changing the style that way, directly set the "color" property:
p.style.color = '#565656';
Related
Recently, I have seen an amazing issue in a SPA web page. When I write a code using chrome developer console, it works once. When I change filter interactions, that code does not work.
Here is site link: https://www.butlins.com/latest-offers/prices.aspx?start=08/2017
My simple testing code is given below:
Thanks, it works but this code is work twice. Why?
function updateChanges(){
$("a#whatsOnLink").css({"position": "absolute" ,"margin-top": "110px", "margin-left": "-50px"});
$("p.latest-type").append("<p class='someText'><b>2 Adults and 2 Children</b></p>");
$("p.someText").css({"font-size": "12px","margin-top": "10px"});
$("p.latest-type").css({"font-size": "16px"});
$("a.button.bookingEngine.button-red").css({"margin-top": "-10px"});
$('.latest-offer-price').each(function(el){
var data = $(this).text().substring(1);
$(this).text('£'+(data*4));
});
}
$(document).ajaxSuccess(function(){
setTimeout(updateChanges,30)
});
updateChanges();
When I write code in console and press enter, append and calculation is made twice.
Furthermore, I change filter interactions, DOM element flashes with violate colour. I don't know why it is caused.
So, What is the reason for behaviour it ?
Why does DOM element flash with violate colour when filter interaction ?
Have any solution to fix it ?
Try inserting a new <style> tag instead. If it is really an SPA then the rule should stay there after the filters are applied. If the page does a full reload you would need to run new code after each new page loads
let rule ='a.button.bookingEngine.button-red{background-color: blue}'
$('head').append($('<style>', {text:rule}))
The css rules for that page have very specific selectors.
An alternative is to hook into their jQuery ajax and use ajaxSuccess global which will fire after any ajax request succeeds
function updateBtns(){
$("a.button.bookingEngine.button-red").css({"background-color": "blue"})
}
$(document).ajaxSuccess(function(){
setTimeout(updateBtns,30)
});
updateBtns()
I want to print a different content from my web page that includes an image. So is my JavaScript code:
function print() {
var w = window.open();
w.document.write(....);
// time for rendering images
setTimeout(function () { w.print(); w.close();},10);
}
Google Chrome shows a new tab, with no print dialog. When I exit the tab and return it, the print dialog shows!
When I take out the 10 ms timeout, it not shows my image (there is no time for rendering the image), but the dialog shows instantly.
Maybe, someone will tell me: Creates HTML using DOM functions like createElement and appendChild. So you don't need rendering time and it is neater.
Therefore I did an alternative with whole HTML content created from scratch
I've used the src dinamic assigment for my image
ele.setAttribute("src","LogoUp.png"); // ele is an image element
instead using a static HTML with same src value
<img id="header" style="margin-left: auto;
margin-right:auto;" src="LogoUp.png" >
PS: My Chrome is updated (v.63)
Now there is no need for rendering time and I can extract the setTimeout function call, however the image is not loading. It's very weird. I saw it in the Chrome DevTools, the official Chrome debugger tool. It shows a right string, but no image is pointed.
I'm using a local computer with Windows 7 and the image is in the same directory as the html source.
So I'm crazy ...
Update:
I also have tried, with no success: (I also saw the html in Chrome DevTools )
c.appendChild(document.getElementById("header").cloneNode(true))
// where c is the image's parent element
It's amazing because the original image works, when using innerHTML
I've made more research and I've discovered a great solution without the need for a popup tab. The magic was made by iFrame. An empty one:
<iframe id="luck" style="border:none;" >
</iframe>
In other point, I've placed the content to be printed (with images)
<div class="printer" style="margin:0; padding:0; display:none">
...
</div>
Display is set with "none" (since I don't want to display that content on the page).
The print code is below in just 2 lines (long ones):
function procPrint() {
document.getElementById("luck").contentDocument.body.innerHTML =
document.getElementsByClassName('printer')[0].innerHTML;
setTimeout(function() {luck.contentWindow.print();},10);
// just 10 ms waiting time is enough,
// maybe complex content demands more.
}
Advantages:
No popup. Cancel or OK resumes the original page.
Print dialog is not missing. No tab to be changed.
Disadvantages:
Rendering of innerHTML assignment demands setTimeout use.
Firefox does not give an error, but the printing does not work. My goal is just a prototype. So for me, I'm ok.
-/-
I did not testing the src bug (correct string don't display the image) with DOM assignments.
I'm satisfied with what I got. I hope it will be useful for someone.
Update:
I've discovered that iFrame printing ignores completely CSS resources like a printing CSS file:
<link rel="stylesheet" type="text/css" href="/print.css" media="print" />
or #media print specs inside a CSS file like:
#media print {
body { font-size: 14pt }
}
It occurs because logically the frame is another document. So the style needs to be attached in the HTML that will be cloned inside iFrame or it's possible includes css file dinamically in the child after cloning HTML inside the iFrame (see here).
My brain understand the logic, but it's weird: If you puts a style in the HTML printing source it works, but if you use the class name in the CSS file, it changes the clone source but not in the cloned nodes.
If one needs to change or set the background color (or image) in the printing, changes directly in the body iframe. One specifies background color in the cointaner doesn't make the work.
In this case, add the below line in procPrint function above.
d.style.backgroundColor = "#FF0000";
Update 2
For invisible iFrame on the screen uses:
#media screen{
.printonly, .printonly * {
display: none !important;
}
}
When I put this code:
window.onload = function(){
var inputs = document.querySelectorAll("input[type=text]");
console.log(inputs.length);
for(var j=0; j<inputs.length; j++){
inputs[j].onclick = function(){
this.style.width = "500px";
}
}
}
Into an html page, it works great, but if I put it into an external .js file the for loop never starts as inputs.length is equal to 0, even if in the page that calls the script there are plenty of inputs. What could be the problem?
Update:
I found out that the code works in normal conditions, but it doesn't:
on inputs that are contained in a div that was previously hidden and
then was shown via js my bad, the hidden input was of type "email"
on every input if they're loaded via ajax I found out why: since the function is fired only when the window loads, it won't see the loaded inputs
Very often, the placement of your script tag can affect your DOM selection. So make sure that your script tag is placed at the bottom of your html file just before the end of the body tag. Perhaps this will fix the issue!
Try attaching your function with addEventListener instead of setting window.onload:
window.addEventListener(function() {
//...
});
If this solves your problem then as #adeneo said, window.onload is being assigned elsewhere in the script which overwrites any other value it can have.
Which is why in general, using addEventListener is better as you can call it as many times as you want without overwriting anything.
But the problem could also simply be that your script isn't being evaluated at all, did you try putting some top-level console.log in there?
With the help of the users who commented/answered, I found out that some of the inputs I was trying the code to were of type "email" and not "text", while in other cases the inputs were loaded via ajax, so after the DOM was loaded. To fix these problems, I've edited
var inputs = document.querySelectorAll("input[type=text]");
To
var inputs = document.querySelectorAll("input[type=text],input[type=email]");
And I called again the function when the content loaded via ajax was ready.
I need an in-page editor to take notes when reading a web page, so I write a little javascript snippet:
document.body.innerHTML+="<div style='position:fixed;\
top:10px;right:10px;width:300px;height:50%;background:#ccffcc;\
z-index:9999'><p contenteditable='true' style='font-size:150%;\
width:100%;height:100%'></p></div>";
to add a floating editor on the page I am reading.
When I execute this in Chrome's console, everything works fine. But when I add a bookmark: javascript:[the-above-js-code], and click it from bookmark bar, all css are gone from the page.
What is happening? And what can I do to avoid this?
EDIT:
When I change the snippet to:
var frag = document.createDocumentFragment();
var myDiv = document.createElement("div");
myDiv.innerHTML="<div style='position:fixed;top:10px;right:10px;width:300px;height:50%;background:#ccffcc;z-index:999'><p contenteditable='true' style='font-size:150%; width:100%;height:100%'></p></div>";
frag.appendChild(myDiv);
document.body.appendChild(frag);
It works in the bookmarklet. Looks if I re-write body's innerHTML, the stylesheets are not applied. But it still baffles me why the first snippet works in Chrome console.
EDIT：
I don't know why, but after I append this to the bookmartlet, it works.
void(0);
It works because javascript: URL will make the browser render the result of the expression. The result of your first script is just plain HTML without any CSS (it's also not following any external links).
You can test it by executing javascript:x = 'hello' in your address bar.
The behavior is different when your script returns undefined which void(0) does. In this case browser won't redirect to the new content so both javascript:x = 'hello';void(0); and javascript:x = 'hello';return undefined; does nothing.
I have some code that animates a <div>. When the animation is complete, several things need to happen (mostly manipulation of CSS on various elements), so I naturally put them callback provided by jQuery's .animate();
It behaves as expected in Firefox. I can't tell whether or not it's an issue in IE because there are still some CSS issues preventing it from displaying properly there - I can't tell if it's the CSS or the same problem I'm having with Chrome. Regardless, for the moment, I'm focusing on Chrome.
One thing to note is that it doesn't happen if I do a console.log right before the line that's not being executed. Same if I insert a breakpoint and then let it continue.
$sliders.animate($thisSlideConfig, 250, function() {
$newPg.removeAttr('style');
$curPg = $newPg;
$curPgInf = plugin.getPgInf($curPg);
plugin.setIndTxt();
load2nav();
plugin.adjustNavState();
doCleanup();
});
The line nor being run is $newPg.removeAttr('style');
It doesn't seem to matter where in the block I put that line or how I select $newPg.
Oh yeah, I'm on Chrome 19.0.1084.52.
Removing the style attribute is unreliable. It may not trigger redrawing of the page (whereas a console log or a breakpoint force it to). Instead, try manually calling:
$newPg.style.XYZ = "";
For each style property you defined, if you can list them. If not, try this:
for( var x in $newPg.style) $newPg.style[x] = "";
These will trigger the correct redraw, and should hopefully stop the problem.