I following the book "DOM Scripting" by Jeremy Keith and I have hit a wall in trying to get a small image gallery to render correctly in Internet Explorer 6/7.
I have 4 thumbnails which load in a placeholder when clicked using the following code:
function showPic(whichpic) {
if (!document.getElementById("placeholder")) return true;
var source = whichpic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src",source);
if (!document.getElementById("description")) return false;
var text = whichpic.getAttribute("title") ? whichpic.getAttribute("title") : "";
var description = document.getElementById("description");
if (description.firstChild.nodeType == 3) {
description.firstChild.nodeValue = text;
}
return false;
}
My placeholder is inserted into the page using createElement("img"), however when I click a thumbnail the image is compressed to the size of the placeholder that it replaced.
function preparePlaceholder() {
if(!document.createElement) return false;
if(!document.createTextNode) return false;
if(!document.getElementById) return false;
if(!document.getElementById("imagegallery")) return false;
var placeholder = document.createElement("img");
placeholder.setAttribute("id","placeholder");
placeholder.setAttribute("src","images/placeholder.gif");
placeholder.setAttribute("alt","Gallery Placeholder");
var description = document.createElement("p");
description.setAttribute("id","description");
var desctext = document.createTextNode("Choose an image");
description.appendChild(desctext);
var gallery = document.getElementById("imagegallery");
insertAfter(placeholder,gallery);
insertAfter(description,placeholder);
}
So the result as pictured below is a skewed image:
Live site here: http://anarchist.webuda.com/
Javascript here: http://pastebin.com/kaAhjdqk
HTML here: http://pastebin.com/Dm5p2Dj6
CSS here: http://pastebin.com/yiVPiQZe
Try adding to the showPic function the next 2 lines after placeholder.setAttribute("src",source);
placeholder.removeAttribute('width');
placeholder.removeAttribute('height');
Using IE8 Developer Tools (in Compatibility Mode) I could reproduce the problem and find that the width and height are being assigned automatically. So I tested with the debugger using the removeAttribute and the image grew to the proper size. But I don't really know if the place for those lines is exactly right, so let me know.
Related
First off I would like to say, the person that originally created this portion of the code is no longer on the team.
We are creating a development tool to Administrate and Develop servers for our game, that has its own programming language.
I'm using JavaFX with WebView to generate the chat area of the development tool to communicate with other developers and staff. However I want it so hen you post a link it actually shows as a link instead of plain text. I have tried things such as AutoLinker with no success. Here is the HTML portion of the webview.
<script src=".././scripts/Autolinker.js"></script>
<script type="text/javascript">
app = null;
const messages = document.getElementById("messages");
function addMessage(message, options) {
const p = document.createElement("p");
const c = message.indexOf(":");
const modifiedMessage = message; //replaceURLWithHTMLLinks(message);
const ridBrackets = options.replace(/[\[\]']/g, "");
const tokenize = ridBrackets.split(",", 2);
const rcChatOptions = tokenize;
const mFontColor = tokenize[rcChatOptions.BFONTCOLOR];
let timeStampFormat = tokenize[rcChatOptions.TIMESTAMP];
if(c > -1) {
const u = document.createElement("span");
const a = document.createElement("a");
u.className = "user";
if(mFontColor != null) {
u.style.color = mFontColor;
} else {
u.style.color = "#00c02b";
}
//Turn plain text links into actual links
u.appendChild(document.createTextNode(Autolinker.link(modifiedMessage.substring(0, c + 1))));
p.appendChild(u);
if(document.selectedfont != null) {
p.style.fontFamily = document.selectedfont;
}
p.appendChild(document.createTextNode(modifiedMessage.substring(c + 1)));
} else {
p.appendChild(document.createTextNode(modifiedMessage));
}
// Append message and scroll to bottom (if at bottom)
const scrollTop = document.body.scrollTop;
const scrolledToBottom = scrollTop + window.innerHeight >= document.body.scrollHeight;
if(scrolledToBottom) {
messages.appendChild(p);
window.scrollTo(document.body.scrollLeft, document.body.scrollHeight - window.innerHeight);
} else {
messages.appendChild(p);
}
messages.style.backgroundColor = "transparent";
}
</script>
I removed portions of the code that I felt was just a distraction.
This what the tool looks like
https://share.getcloudapp.com/kpuNDB4m
this is what it looks like using AutoLinker
https://share.getcloudapp.com/8LunomDL
(So auto linker is doing its job, it just still isn't rending as HyperLinks)
It looks like the TextNode is created after collecting some substring which would be the link. Here's an example of what it would look like if a link was created directly in js then passed to the TextNode.
One thing you can do is place the text inside of an a tag within a paragraph and then convert like so:
var link = document.createElement('link');
link.innerHTML = 'Website: <a href="http://somelink.com" </a>
link.href = 'http://somelink.com';
link.appendChild(document.createTextNode('http://somelink.com'));
After getting pointed in the right direction (By Frank, Thank You) I found a javascript Library that helped me accomplish what I was looking for.
Library
https://github.com/cferdinandi/saferInnerHTML
Here is an example!
https://share.getcloudapp.com/nOuDPnlp
Usage:
saferInnerHTML(message, modifiedMessage, true);
The last param is an option, append or overwrite.
Obviously, I will have to do some CSS work to make them not display as buttons. But it is exactly what I was trying to achieve.
I'm making a Chrome extension that acts on Facebook's newsfeed. I'm trying to select the URL starting with "https://external-ort2-2.xx" from Facebook's "_q7o" div and log it to the console (function capturePic). The earlier code, which inserts a button after the "_q7o" div, works fine, so I think I'm selecting the right div. But URL isn't getting logged.
Many thanks!
function callAttentionToX(jNode) {
var uCW = jNode.closest("div._q7o");
var button = document.createElement("a");
button.innerHTML = "I'm a button";
button.style.float= "left";
uCW.append(button);
}
function capturePic(jNode) {
var uCW = jNode.closest("div._q7o");
var firstHref = $(".uCW a[href^='https://external-ort2-2.xx']").attr("href");
console.log(firstHref);
}
waitForKeyElements("[aria-label$='Story options']", callAttentionToX, capturePic);
I'm working on a WP website, and I'm pretty new with code, so after I struggled a whole day to make it work, I just gave up, and decided to ask someone.
I used dynamic meta for all open graphs and twitter cards except image.
All the website pages have a container with an article inside; some articles have an image, and some have none. For the ones with no image, I want to use the Company logo.
So I want to use javascript to add og:image and twitter:image to wordpress, but I can't get over one error that says:
document.getElementsByTagName(" ") is not a function
//add image meta tag
addImageMetaTag();
function addImageMetaTag() {
var imgHolder = document.getElementsByTagName("article")[0];
var image = imgHolder.getElementsByTagName("img");
var source;
function getSource() {
if (image.length != 0) {
var source = image[0].getAttribute("src");
} else {
var source = "http://link_to_my_default_image.png";
}
return source;
};
var meta = document.createElement('meta');
meta.setAttribute("property", "og:image");
meta.content = source;
meta.name = "twitter:image";
document.getElementsByTagName('head')[0].appendChild(meta);
};
Gerald, open graphs and twitter cards are used to create the shared snippet, so it's got nothing to do with crawling.
You were right with your other answer, there were two errors: indeed, I used "getSource" instead of "source", but Wordpress still wouldn't find the "article" class, because the content loads after the header, so I had "var content = undefined", so I got the function working by changing it to this:
// add image meta tag
window.addEventListener("load", function() {
addImageMetaTag();
});
function addImageMetaTag() {
var content = document.getElementById("primary");
var images = content.querySelectorAll("img");
var source;
if (images.length != 0) {
var source = images[0].getAttribute("src");
}
else {
var source = "http://link_to_my_default_image.png";
}
var meta = document.createElement('meta');
meta.setAttribute("property","og:image");
meta.content = source;
meta.name = "twitter:image";
document.getElementsByTagName('head')[0].appendChild(meta);
};
I tested the following code in IE, Chrome, and Firefox and it does not work in any of them. I have read several questions about similar problems but they have not offered solutions that fix my example.
I am trying to create a pause/play button that interfaces with JWplayer (I also want it to interface with flowplayer, once I get the button working) and the image will change depending on which image is currently there. I also have a stop button that stops the player completely and changes the image of the pause/play button to pause.
Here is my current code:
<script type="text/javascript">
function changeimg()
{
var obj = document.getElementById('image1');
var imgtag1 = '<img src=\'PLAY.png\'>';
var imgtag2 = '<img src=\'PAUSE.png\'>';
if(obj.innerHTML == imgtag2)
{obj.innerHTML = imgtag1;}
else
{obj.innerHTML = imgtag2;}
return;
}
function playimg()
{
document.getElementById('image1').innerHTML = '<img src=\'PLAY.png\'>';
return;
}
</script>
<div id="image1" href="#" onclick="changeimg(); jwplayer('mediaspace1').play(); jwplayer('mediaspace2').play(); jwplayer('mediaspace3').play(); jwplayer('mediaspace4').play();"><img src='PLAY.png'></div>
<div href="#" onclick="playimg(); jwplayer('mediaspace1').stop(); jwplayer('mediaspace2').stop(); jwplayer('mediaspace3').stop(); jwplayer('mediaspace4').stop();"><img src='STOP.png'></div>
The play/pause function works, and the first div WILL change into the pause img (so the javascript is going through) and it WILL change back into play if I click on the second div (stop function - triggers playimg() ) but it will not change back into the play image if I click on the pause button again.
For security reasons I can't link the website, but any help would be appreciated
It looks like all you really want to change is the SRC of the IMG tag, not necessarily the entire innerHTML. As machineghost mentions in his comment, there may be whitespace added or other changes to the full HTML that may make your comparison come out as false.
However, you could check if obj.src == "PLAY.png" and set the SRC attribute directly. Something like this:
function changeimg()
{
var obj = document.getElementById('image1');
var img1 = 'PLAY.png';
var img2 = 'PAUSE.png';
if(obj.src == img2)
{obj.src = img1;}
else
{obj.src = img2;}
return;
}
I think the innerhtml you are replacing in changeimg() is affecting the whole obj element, which is a div. So, if(obj.innerHTML == imgtag2) will return false since the div innerhtml is not imgtag2, but the next time you are going to call changeimg(), "obj" will be undefined because you replaced its innerhtml with an HTML code that doesn't have an id: {obj.innerHTML = imgtag2;}
Check the console to see if there's any javascript error, which it should, at if(obj.innerHTML == imgtag2)
rgds.
Just check whether PLAY is present or not and then change innerHTML according to it
function changeimg()
{
var obj = document.getElementById('image1');
var imgtag1 = '<img src=\'PLAY.png\'>';
var imgtag2 = '<img src=\'PAUSE.png\'>';
if(obj.innerHTML.indexOf('PLAY') != -1)
{obj.innerHTML = imgtag2;}
else
{obj.innerHTML = imgtag1;}
return;
}
Iam working in an mvc application and using ckeditor 3.6.2 version. I have used the following code for getting selected html from ckeditor.
CKEDITOR.editor.prototype.getSelectedHtml = function () {
if (CKEDITOR.env.ie) {
this.focus();
selection = this.getSelection();
} else {
selection = this.getSelection();
}
if (selection) {
var bookmarks = selection.createBookmarks(),
range = selection.getRanges()[0],
fragment = range.clone().cloneContents();
selection.selectBookmarks(bookmarks);
var retval = "",
childList = fragment.getChildren(),
childCount = childList.count();
for (var i = 0; i < childCount; i++) {
var child = childList.getItem(i);
console.log(child);
retval += (child.getOuterHtml ?
child.getOuterHtml() : child.getText());
}
return retval;
}
};
I have an issue in chrome browser when I selected a text and call CKEDITOR.instances.editor1.getSelectedHtml().
For example, suppose in my editor there is a content <span style="color:red;">Welcome Note</span>. If I selected "Welcome Note" and call getSelectedHtml() method firefox,safari,IE8 returns "Welcome Note" with span tag, but chrome returns only the text "Welcome Note". If Iam trying to replace the selected content using CKEDITOR.instances.editor1.insertHtml("<div style='font-size:12px'>"+ CKEDITOR.instances.editor1.getSelectedHtml()+"</div>"), in chrome I lost the font color since getSelectedHtml() returns only the selected text. But this works fine with other browsers.
Note : If the content is "Welcome <span
style="color:red;">Note</span>" and the selected word is "Welcome
Note". In this case,this will be correct in chrome and other browsers.
Please suggest a proper solution.
There have been some similar cases that are documented on the CKEDITOR web site. In particular, take a look at this one:
http://cksource.com/forums/viewtopic.php?f=11&t=20202