I have been looking around here, and found ways to toggle between 2 css files, but not more files than that. I need to use 1 button to alternate between 4 different files. My main css that is loaded with the html is called style1.css.
I found a js snippet that does this with images, and what it does is put all the images in an array, and take the first object out of and places it last in the array. I have been able to make this work:
var imageUrls = ["images/paulfr.jpg", "images/johnfr.jpg",
"images/georgefr.jpg", "images/ringofr.jpg"];
function changeImage(){
var img = document.getElementById('image');
var imageUrl = imageUrls.shift();
img.src = imageUrl;
imageUrls.push(imageUrl);
}
Now, I tried remaking it for stylesheet files, but it fails:
var stylesUrls = ["css/style1.css", "css/style2.css",
"css/style3.css", "css/style4.css"];
function changeStylesheet(){
var style = document.getElementById('styles');
var stylesUrl = stylesUrls.shift();
style.src = stylesUrl;
stylesUrls.push(stylesUrl);
}
I did make sure that stylesheet id is 'styles'. Could somebody please show me where I go wrong?
change src to href:
style.src = stylesUrl;
to
style.href = stylesUrl;
Full solution:
var stylesUrls = ["css/style1.css", "css/style2.css",
"css/style3.css", "css/style4.css"];
window.onload = function(){
var refButton = document.getElementById("change-styles");
refButton.onclick = function() {
var style = document.getElementById('styles');
var stylesUrl = stylesUrls.shift();
style.href = stylesUrl;
stylesUrls.push(stylesUrl);
}
};
HTML
<link href="css/style1.css" rel="stylesheet" id="styles" type="text/css">
Change
Related
I'm pretty new to JS and programming altogether so I'm sorry in advance if the explanation is a little sloppy, but I'll try to make it as clear as possible.
So what I'm trying to do is have a JS code that reads and displays (in an HTML page) photos from a PC folder, makes them clickable and on the click it redirects you to a page with the same photo but in high resolution.
Now, I have this piece of code that displays the said pictures, but the thing is I don't seem to be able to figure out how to "connect" it to the pictures and make them clickable. What makes it more difficult is that I'm trying to make all of this code dynamic (as you can see I've done in the below code), so I would like not to have any hardcoded titles of pictures and so on.
var index = 1;
var tempImg = new Image();
tempImg.onload = function(){
appendImage();
}
var tryLoadImage = function(index){
tempImg.src = 'img/' + index + '.jpg';
}
var appendImage = function(){
var img = document.createElement('img');
img.src = tempImg.src;
document.body.appendChild(img)
tryLoadImage(index++);
}
tryLoadImage(index);
Any help is very much appreciated, thank you very much!
You can make your images clickable by adding an onclick function to them. Try something like this:
var appendImage = function(){
var img = document.createElement('img');
img.src = tempImg.src;
img.onclick = e => {
// do something you want to show the full picture like this maybe
var el = document.getElementById("fullpictureid");
if (el && e.target.src) {
el.src = e.target.src;
// so that it sets "src" in <img id="fullpictureid"> for example
}
};
document.body.appendChild(img)
tryLoadImage(index++);
}
I am trying to optimise my loading of CSSS files as I am loading some large CSS files on pages where they aren't used. Is there any way for me to enqueue them only if an element is present with a class on that page.
I've tried the following however, it does not work:
jQuery(document).ready(function($) {
//Script Checkers
var wowJS = $('.wow');
if (wowJS.length > 0) {
$.getScript('/wp-content/themes/gowebsites/gw-addon/js/wow.js', function() {
new WOW().init();
});
var head = document.getElementsByTagName('head')[0];
var cssNode = document.createTextNode("link");
cssNode.href = "/wp-content/themes/gowebsites/gw-addon/css/animations.css";
cssNode.rel = "stylesheet";
//console.log("CSS Node: "+cssNode); = [object Text]
head.appendChild(cssNode);
}
});
I have seen functions that work for adding css files to the head however, none of them allow the ability to make it conditional.
EDIT: I've since just used the getScripts() jQuery function however, I am still in need of knowing how to add css to the header only if required.
EDIT: For future reference for anyone, this is the final working code:
jQuery(document).ready(function($) {
//Script Checkers
var wowJS = $('.wow');
if (wowJS.length > 0) {
$.getScript('/wp-content/themes/gowebsites/gw-addon/js/wow.js', function() {
new WOW().init();
});
var head = document.getElementsByTagName('head')[0];
var cssNode = document.createElement("link");
cssNode.href = "/wp-content/themes/gowebsites/gw-addon/css/animations.css";
cssNode.rel = "stylesheet";
head.appendChild(cssNode);
}
});
Create the nodes first then append then using the appendChild() method, like :
var scriptNode = document.createElement("script");
scriptNode.src = "/wp-content/themes/gowebsites/gw-addon/js/wow.js";
var cssNode = document.createElement("link");
cssNode.href = "/wp-content/themes/gowebsites/gw-addon/css/animations.css";
cssNode.rel = "stylesheet";
head.appendChild(scriptNode);
head.appendChild(cssNode);
You should use insertAdjacentHTML
head.insertAdjacentHTML("afterend",'<script language="javascript" src="/wp-content/themes/gowebsites/gw-addon/js/wow.js"></script>');
head.insertAdjacentHTML("afterend",'<link href="/wp-content/themes/gowebsites/gw-addon/css/animations.css" rel="stylesheet">');
Please be advised that the following codes are generated by an engineer. (I don't have contact with the engineer right now)
Now here is the scenario. According to the engineer who had created this the whole collection of these scripts should be able to generate a button once edited properly and embedded to our website.
Before I implement this on our own website I want to test these codes to a simple page created through saving codes from our website. I ask the engineer if it is possible and he said yes.
Now here is the code that should be able to generate the button.
clickCall.js
(function () {
var createScriptElement = function (src, onload, onerror) {
var element = document.createElement("script");
element.type = "text\/javascript";
element.src = src;
element.onload = onload;
element.onerror = onerror;
return element;
};
var createLinkElement = function (src) {
var element = document.createElement('link');
element.href = src;
element.rel = 'Stylesheet';
element.media_type = 'text/css';
return element;
};
var createUI = function () {
var clickCallDiv = document.createElement('div');
clickCallDiv.style.cssText = 'width: 300px;height: 60px;position: fixed;z-index: 999;right: 20px;bottom: 320px;';
var call_btn = document.createElement("button");
call_btn.id = "dial_btn_call";
var session_div = document.createElement("div");
session_div.id = 'sessions';
var webcam_div = document.createElement("div");
webcam_div.style.cssText = 'height:0';
webcam_div.id = 'webcam';
var video_remote = document.createElement('video');
video_remote.id = 'remoteView';
video_remote.autoplay = 'autoplay';
video_remote.hidden = 'hidden';
var video_local = document.createElement('video');
video_local.autoplay = 'autoplay';
video_local.hidden = 'hidden';
video_local.muted = 'muted';
video_local.id = 'selfView';
webcam_div.appendChild(video_remote);
webcam_div.appendChild(video_local);
clickCallDiv.appendChild(call_btn); //add the text node to the newly created div.
var contain = document.createElement('div');
contain.appendChild(session_div);
contain.appendChild(webcam_div);
clickCallDiv.appendChild(contain);
return clickCallDiv;
};
var urls = {};
urls.rtcninja = 'rtcninja.js';
urls.jquery = 'jquery.js';
urls.i18n = "jquery.i18n.js";
urls.messagestore = "jquery.i18n.messagestore.js";
urls.jssip = 'jssip.js';
urls.init = 'init.js';
urls.gui = 'gui.js';
urls.css = 'style.css';
var rtcninja_script = createScriptElement(urls.rtcninja, function () {
// Must first init the library
rtcninja();
// Then check.
if (!rtcninja.hasWebRTC()) {
console.log('WebRTC is not supported in your browser :(');
} else {
document.body.appendChild(createUI());
}
});
var jquery_script = createScriptElement(urls.jquery, function(){
document.head.appendChild(i18_script);
document.head.appendChild(jssip_script);
document.head.appendChild(gui_script);
document.head.appendChild(init_script);
});
var i18_script = createScriptElement(urls.i18n, function(){
document.head.appendChild(messagestore_script);
});
var messagestore_script = createScriptElement(urls.messagestore);
var jssip_script = createScriptElement(urls.jssip);
var init_script = createScriptElement(urls.init);
var gui_script = createScriptElement(urls.gui);
var click_call_css = createLinkElement(urls.css);
document.head.appendChild(jquery_script);
document.head.appendChild(rtcninja_script);
document.head.appendChild(click_call_css);
})();
That script, when embedded, should be able to generate a button. The way he embedded the script on their website is through this
<script>
document.write('<script src="sourcefile/clickCall.js">/script>')
</script>
But this won't work on my side so I tried this
document.write('<sc' + 'ript src="clickCall.js">/sc' + 'ript>')
Now my first problem is that this script prevents all other scripts from loading, causing to have an empty output. another is that it won't display the expected button that it was suppose to show on the webpage. My solution to this problems was to implement DOM but I don't know how I'll implement it especially because I can't understand how it works and how to implement it. Could you kindly explain to me how DOM works and how am I going to implement it? Thanks
document.write when executed just writes the string and doesn't execute the inside script.
Hence, instead of this,
<script>
document.write('<script src="sourcefile/clickCall.js"></script>')
you can directly call your script.
<script src="sourcefile/clickCall.js"></script>
This piece of code adds images to the DOM after dragging them into a div-element.
var showImage = function (ev) {
var file = ev.target.file;
var thumb = new Image(100,100);
thumb.src = ev.target.result;
thumb.className = 'thumbFoto';
thumb.title = file.name;
thumb.alt = file.name;
var anchor = document.createElement('a');
anchor.className = 'thumbLink';
anchor.href = ev.target.result;
anchor.rel = 'album1';
anchor.title = file.name;
anchor.appendChild(thumb);
dropZone.appendChild(anchor);
}
This code is linked to the page using
<script type="text/javascript" src="js/code.js"></script>
After the images are added to the webpage, I would like preview them using Fancybox.
When the page is loaded (before I dragged any image onto it), this script is executed in the html-header:
<script type="text/javascript">
$(document).ready(function() {
/* Apply fancybox to albums */
$("a.thumbLink").fancybox();
});
</script>
Now how do I make sure I can preview the recently added images using Fancybox?
I assume you use jQuery UI draggable object, you can call your fancybox on stop() event of your draggable object, like this:
$( ".selector" ).draggable({
stop: function( event, ui ) {
$("a.thumbLink").fancybox();
}
});
EDIT:
Based on your code you can simply put your fancybox caller in function of showFileInList, like this:
var showFileInList = function (ev) {
var file = ev.target.file;
if(document.getElementById("fileDropText")){
var textToBeRemoved = document.getElementById("fileDropText");
var imageToBeRemoved = document.getElementById("fileDropImg");
textToBeRemoved.parentElement.removeChild(textToBeRemoved);
imageToBeRemoved.parentElement.removeChild(imageToBeRemoved);
}
var thumb = new Image(100,100);
thumb.src = ev.target.result;
// var thumb = createThumb(ev.target.result);
thumb.className = 'thumbFoto';
thumb.title = file.name;
thumb.alt = file.name;
var anchor = document.createElement('a');
anchor.className = 'thumbLink';
anchor.href = ev.target.result;
anchor.rel = 'album1';
anchor.title = file.name;
// anchor.addEventListener("click", showImagePreview, false);
anchor.appendChild(thumb);
// fileList.insertBefore(anchor, dropZone);
dropZone.appendChild(anchor);
// show fancybox
$("a.thumbLink").fancybox({type: "inline", href: "#fileDrop"});
}
See working code HERE
Try routing all of your DOM changes through a single object using the "Chain of Responsibility" pattern. That way the object can keep track of any changes to the dom. Then I would use ConversationJS to fire a function that does whatever you want on DOM change: https://github.com/rhyneandrew/Conversation.JS
I want to load these banner.png files to the screen but all it prints out is the actual text from the banner array?
function randImg(){
var banner = new Array();
banner[0] = 'banner1.png';
banner[1] = 'banner2.png';
banner[2] = 'banner3.png';
maxImg = banner.length;
randNum = Math.floor(Math.random()*maxImg);
return banner[randNum];
}
any thoughts? I think I need to some how add a src but I am not sure how.
Might be too obvious, but...
function randImg(){
var banner = new Array();
banner[0] = 'banner1.png';
banner[1] = 'banner2.png';
banner[2] = 'banner3.png';
maxImg = banner.length;
randNum = Math.floor(Math.random()*maxImg);
return '<img src="' + banner[randNum] + '" />';
}
Demo: http://jsfiddle.net/AlienWebguy/u7yfq/
My pure javascript DOM manipulation is a little fuzzy (usually use jquery) but something like this should do the trick:
<div id="images"></div>
<script type="text/javascript">
function randImg(){
var banner = new Array();
banner[0] = 'banner1.png';
banner[1] = 'banner2.png';
banner[2] = 'banner3.png';
maxImg = banner.length;
randNum = Math.floor(Math.random()*maxImg);
var container = document.getElementById('images');
var img = document.createElement('img');
img.setAttribute('src',banner[randNum]);
container.appendChild(img);
}
</script>
The instruction that loads the image should be like this.
Where imgElement is an IMG element.
imgElement.src = randImg();
If you don’t know how to get an IMG element. Give the IMG element an ID attribute and load this like this.
For an IMG element as <img id="myImage" src="" />
Then:
var imgElement = document.getElementById("myImage");
imgElement.src = randImg();
Note.- my answer gives instruction on how to change the source of an IMG element that exists in the DOM (It is recommended to do so). You should NEVER document.write() an element, Neither on demand or when page is loading. That practice has been deprecated and many browsers would delete the whole page contents if you do so.