We Keep Coding

Clone, Play and Replace the Cloned Dom - Javascript / Jquery

I'm trying to export the whole page as PDF. During certain situation's like, if the CSS is loaded from separate file is not applied in exported PDF. So I'm trying to convert all CSS as inline using this code.
(function ($) {
var rules = document.styleSheets;
for(var rl in rules){
var rule = rules[rl].cssRules;
try{
for (var idx = 0, len = rule.length; idx < len; idx++) {
$(rule[idx].selectorText).each(function (i, elem) {
if($(elem).is(":visible"))
elem.style.cssText += rule[idx].style.cssText;
});
}
}catch(e){
console.log(e);
}
}
})(jQuery);
After I ran this code, my exported PDF is working good. But my DOM is not as before. So is there anyway where I can clone my DOM before operations, and replace the cloned DOM as before after playing with DOM. Hope my question is clear. Thanks in anticipation for the help.

In this Snippet there are 2 much more simpler ways than modifying a stylesheet:
Isolate the <iframe>,<embed>, or <object> by wrapping an element around it then apply styles referencing the wrapper element. This is demonstrated in the Snippet with div.jframe as the wrapper.
Inject a <style> block with new rulesets.
If either one is done with moderate care, you shouldn't be left with conflicting styles.
Note: The PDF in the iframe is sandboxed, so it's not there but everything still applies.
SNIPPET
function injectStyles(rule) {
document.body.insertAdjacentHTML('afterbegin',
'­<style>' + rule + '</style>');
}
injectStyles('iframe:hover { border: 5px solid blue; }');
.jframe iframe {
outline: 10px solid tomato;
}
<div class='jframe'>
<iframe src='http://che.org.il/wp-content/uploads/2016/12/pdf-sample.pdf' height='400' width='400'></iframe>
</div>

Shading a block that my mouse is over

I am writing a code that creates a memory game. I need to make it so that when my mouse is over a block it shades that block to a different color. I am writing the code in javascript. Whenever I try something is just says string is not a function. I am writing in khan academy and the code is mouseOver="this.color='black'"; Can anyone please help me?
draw = function() {
if (delayStartFC && (frameCount - delayStartFC) > 30) {
for (var i = 0; i < tiles.length; i++) {
if (!tiles[i].isMatch) {
tiles[i].drawFaceDown();
}
}
flippedTiles = [];
delayStartFC = null;
// commented no loop because the timer stops working if this is enabled.
mouseOver="this.color='black';"
// noLoop();
}

You need to use this.style.backround='color' instead of this.color='color'. Try the below code:
<div style="background:red;" onmouseover="this.style.background='blue';" onmouseout="this.style.background='red'">Content</div>

When you put the code inline, it can get messy, so extracting it would be helpful like below:
The "selector" is whatever div or class or id you want to turn black on the mouse hover action.
$('selector').hover(function() {
$(this).css('background-color', 'black');
});

One solution could be:
<div onmouseover="Color(this,'black')"></div>
function Color(obj, color){
obj.style.background=color;
}
hope it's useful!

I'm assuming that you are looking at the "Project:Memory++" page, so I'll work from there.
If you look at the function above draw, it's called mouseClicked, you'll notice that it has a way of checking if a card is under the mouse:
mouseClicked = function() {
for (var i = 0; i < tiles.length; i++) {
if (tiles[i].isUnderMouse(mouseX, mouseY)) { //this line designates a tile under the mouse
// draw the tile, tiles[i], with a color over it.
After you've found which tile to color, you'll need to write a function to change it, either by changing the image that the tile shows or by giving it an overlay. There are a few good ideas in the other threads, but I would stick with what you've been given during your other projects on Khan Academy.

I usually put events like mouseover in event listeners, rather than in the HTML mouseover attribute. If you're looking to do it in pure JavaScript, try this:
document.getElementById("test").addEventListener("mouseover",function(e){e.target.style.backgroundColor = "#000";});
document.getElementById("test").addEventListener("mouseout",function(e){e.target.style.backgroundColor = "#FFF";});
You can also just accomplish this with CSS:
#test {
background-color: #FFF;
}
#test:hover {
background-color: #000;
}

how to handle box background color for multiples time function refreshing in IE

function first(Objs) {
var imgid= Objs;
secondMethod(imgid);
}
function secondmethod(imgid) {
var boxid=imgid.id;
var color = getBackgroundColor(imgid.status);//am passing different colors for every refreshing(i.e. #D03C78 or #B8B8B8) values from DataBase
if($('#boxcontent'+boxid).is(':visible')) {
}else{
var boxText = document.createElement("div");
boxText.id='boxcontent'+boxid;
boxText.style.cssText = "white-space:nowrap;text-align:center;border:2px solid ;background-color:"+color+";opacity:0.9;filter:alpha(opacity=90);-moz-border-radius: 5px;border-radius: 5px;color:black !important;";
return boxText;
}
$('#boxcontent'+boxid).css({'background-color':color});
}
this box content is displaying on map.
this box background color not getting in IE,but works in FireFox,
this first function refreshing every 10 seconds with different objts.(for every refreshing changing color).
in IE not working(i.e. color not changing),please help for this problem.

check is it refreshing in every 10 seconds.
you said that for every 10 seconds will get different objects.
IE may get problem with resending data(when refreshing) i.e caching problem.
var color = getBackgroundColor(imgid.status);//am passing different colors for every refreshing(i.e. #D03C78 or #B8B8B8) values from DataBase
alert(imgid.id+" : color is : "+color)
lets check this one in Firefox and IE.

its hard to tell, why IE not setting the color with the information you gave...
might be also a css error or missing commas etc.
But ill try to help you out..
You have a strange mix in JS and JQuery, so i tried to merge this to jQuery, as it
proviedes some X-Browser stuff for IE..
Also i made a class, because its more clean like this.
//Some definition
var Objs = {
id : 'test',
status : "red"
};
//Call
first(Objs);
function first(Objs) {
var imgid= Objs;
secondMethod(imgid);
}
function secondMethod(imgid) {
var boxid = imgid.id;
var color = imgid.status;
if($('#boxcontent' + boxid).length < 1) { //No existing box, make new
var boxText = $("<div></div>")
.attr("id", "boxcontent"+boxid)
.addClass("basciStyleNoColor")
.css({
'background-color' : color,
opacity : 0.9 //<<-- Jquery sets filter for IE...
});
$("body").append(boxText);//<<-Insert here, or retrun and insert later...
return boxText;
}
}
CSS:
.basciStyleNoColor {
white-space:nowrap;
text-align:center;
border:2px solid ;
-moz-border-radius: 5px;
border-radius: 5px;
color:black !important;
}
here the Fiddle.net
hope it helps some how...

How to NOT pre-load images in expand script?

I have a question that's bugging me quite a bit, been working on it a while with every road leading to dissapoints, and no suitable alternatives I've found.
How do I have the following NOT pre-load images?
var oStyle = document.createElement('style');
oStyle.setAttribute('type','text/css');
var css = 'a.hovex-imageview { -moz-outline: 1px dotted red; }';
css += 'a.hovex-imageview img.hovex-imageview { display: none;position: fixed;left: 15%;right: 85%;top:15%;bottom:85%;max-width: 100%;margin: 0;border: none; }';
css += 'a.hovex-imageview:hover img.hovex-imageview { display:block;max-width:80%;max-height:80%; }';
oStyle.innerHTML = css;
document.getElementsByTagName('head')[0].appendChild(oStyle);
var aElm = document.getElementsByTagName('a');
for (i=0; i<aElm.length; i++) {
if (aElm[i].href.match(/\.(jpg|jpeg|gif|png)$/)) {
var oImg = document.createElement('img');
oImg.setAttribute('src',aElm[i].href);
oImg.setAttribute('class','hovex-imageview');
aElm[i].appendChild(oImg);
aElm[i].setAttribute('class','hovex-imageview');
}
}
Basically, it is perfect in almost every way for my purpose, though the one drawback is it often finds itself on pages with >1000 large images, so having it only load the full image on mouseover of the link/thumb would save people some crashed browsers, I've had people complain about that.
I can see why this could be difficult to do, as it works by creating every image on load and hiding them, then showing them on hover, with it said if I'd found/managed to write an acceptable alternative I'd of used it: this seems to be what I've got.
Great thanks to any helpful wizards in advance~

I would approach it by only setting the image src on mouse over...
See this fiddle: http://jsfiddle.net/LD8t6/
var aElm = document.getElementsByTagName('a');
for (i=0; i<aElm.length; i++) {
if (aElm[i].href.match(/\.(jpg|jpeg|gif|png)$/)) {
var oImg = document.createElement('img');
oImg.setAttribute('class','hovex-imageview');
oImg.setAttribute('src','');
aElm[i].appendChild(oImg);
aElm[i].setAttribute('class','hovex-imageview');
aElm[i].onmouseover = function() {
oImg.setAttribute('src', this.href);
}
}
}

highlight code using mootools1.2

I am using mootools1.2 as my js framework.
I have one problem regarding the highlight my some html element when page gets load.
I need to highlight my error message if any on page when page loads.
For example.
When page load then error div have #FFFFFF as bg color.
For highlight it will use #FC0000 as a bg color and then after it will get back to #FFFFFF bg color.
Any one can please suggest how can i do this..
Thanks in advance.
Avinash

MooTools way:
window.addEvents({
domready: function(){
var errorMsg = $$('.errorMessageEl');
errorMsg.highlight('#FC0000');
}
});
Here's an example: http://mootools.net/shell/s7mRh/
Repeating the highlight
Repeating the highlight a number of times is a bit more complicated– you'd probably want to create a mixin like this:
Array.implement({
blink: function(color, repeats){
this.set('tween', {
link: 'chain'
});
var i = 0;
while (i <= repeats-1){
this.highlight(color);
i++;
}
return this;
}
});
var errorMsg = $$('.errorMessageEl');
errorMsg.blink('#f00', 3);
Example: http://mootools.net/shell/8M9xx/1/

I don't remember exact mootools syntax, but the idea is something like that:
window.addEvent("onload",function()
{
$('divName').style.backgroundColor='#FC0000';
setTimeout($('divName').style.backgroundColor='#FFFFFF',5000) // will wait 5 seconds before returning to orig. color
}
);
If you want it to blink, you can write a function like this:
function blinkit(){
var intrvl=0;
for(nTimes=0;nTimes<3;nTimes++){
intrvl += 1000;
setTimeout("$('divName').bgColor='#0000FF';",intrvl);
intrvl += 1000;
setTimeout("$('divName').bgColor='#FFFFFF';",intrvl);
}
}
source:
http://w3schools.invisionzone.com/index.php?showtopic=21893