How is it possible to make the JS work in this:
http://jsfiddle.net/JoshSalway/3vVVc/
<script type="text/javascript" id="SCRIPT_12">var arICImages0 = new Array(4); arICImages0[0] = "http://easydealsonline.info/prod/images/281259.jpg";arICImages0[1] = "http://easydealsonline.info/prod/images/281260.jpg";arICImages0[2] = "http://easydealsonline.info/prod/images/281261.jpg";arICImages0[3] = "http://easydealsonline.info/prod/images/281262.jpg"; function swapIC0(n) { document['ICImage0'].src = arICImages0[n]; }
</script>
Like this:
http://www.ebay.com.au/itm/New-Stage-Light-Truss-Tripod-Lighting-Stand-Rack-/261352049121
I copied code with SnappySnippet. Trying to re-create similar JS on this side. what is missing to make "javascript:swapIC0(0);" work?
How do you make JS & CSS work inline?
Here's an updated fiddle that should work - http://jsfiddle.net/3vVVc/1/
I changed the function in your javascript to:
function swapIC0(n) {
document.getElementById('IMG_20').src = arICImages0[n];
}
Related
I'm new to learning CSS/HTML and i've been working a bit on trying to recreate the windows 98 vibe. However, one thing I've had a lot of trouble with specifically is trying to recreate the "start" button with a simple toggle script.
You can see an example of the current script i'm using here; https://thealonic.tumblr.com/ most of the work is my own work with some scraps of css from the old theme I was using along with win98.css
I've looked around a bit and tried around 4-5 solutions with no luck over the course of a couple hours, but none seemed to be helping me making any progress so I just tried to use more bare bones solutions by just using if statements.
<head>
<style>
.start_button {
float: left; background-image: url(https://cdn.discordapp.com/attachments/630047188520665121/785903172115234846/unknown.png);
height: 22px; width: 54px; margin-left: 2px; margin-top: 2px; z-index: 3; background-repeat:no-repeat;}
</style>
</head>
<body class="win98>
<div class="start_button" id="start_button" onclick="startpress()"></div>
<script>
function startpress() {
if (document.getElementById("start_button").style.backgroundImage !== "url('https://cdn.discordapp.com/attachments/630047188520665121/785903300292902982/unknown.png')") {
document.getElementById("start_button").style.backgroundImage = "url('https://cdn.discordapp.com/attachments/630047188520665121/785903300292902982/unknown.png')" } else {
document.getElementById("start_button").style.backgroundImage = "url('https://cdn.discordapp.com/attachments/630047188520665121/785903172115234846/unknown.png')"}}
</script>
</body>
This "almost" gets the job done but, the trouble I'm having is that the button recognises the press, and then it says down, even with such a simple if statement like this. I've seen this solution work for pretty much the exact same usecase but I don't understand why this doesn't quite work. Is there just something about html scripts specifically I don't quite understand?
Anyway, thanks for any help I get in advance and sorry if this has been asked before, but a quick search didn't get anything like this specifically as I'm not entirely sure if the cause is just the way I'm addressing the background image.
You probably need a Eval or something like that in the if.
But i would go with something more simple
var startmode=true
If (startmode)
{
startmode=false
document.getElementById("start_button").style.backgroundImage = "url('https://cdn.discordapp.com/attachments/630047188520665121/785903300292902982/unknown.png')"
}
else
{
startmode=true
document.getElementById("start_button").style.backgroundImage = "url('https://cdn.discordapp.com/attachments/630047188520665121/785903172115234846/unknown.png')"
}
The problem in your code is that the condition inside the if statement doesn't change every time you click the button. You need some kind of toggle that changes at every click. You can try something like this:
const startButton = document.getElementById("start_button");
let startButtonOpen = false;
function startpress() {
startButtonOpen = !startButtonOpen;
if (startButtonOpen) {
startButton.style.backgroundImage = "url('https://cdn.discordapp.com/attachments/630047188520665121/785903300292902982/unknown.png')";
} else {
startButton.style.backgroundImage = "url('https://cdn.discordapp.com/attachments/630047188520665121/785903172115234846/unknown.png')";
}
}
Here's the solution to the problem i finally got around to solving.
So for the taskbar I have this, which just toggles between true and false alongside addressing the window titlebar and the taskbar.
function tumblrtoggle() { pyroButtonOpen = true;
if (tumblrButtonOpen == false) { inactiveall(); tumblrButtonOpen = true;
document.getElementById("post").style.zIndex = (currentno = currentno + 1); currentno = currentno + 1;
document.getElementById("postwindow").style.backgroundImage = "url('https://cdn.discordapp.com/attachments/630047188520665121/791328235451318342/title-bar_postheaderinactive.png')";
document.getElementById("taskapp1").style.backgroundImage = "url('https://cdn.discordapp.com/attachments/630047188520665121/789420847604564008/Taskbar_application1.png')";
} else if (pyroButtonOpen == true){ inactiveall(); tumblrButtonOpen = false;
document.getElementById("postwindow").style.backgroundImage = "url('https://cdn.discordapp.com/attachments/630047188520665121/791321110750298162/title-bar_postheader.png')";
document.getElementById("taskapp1").style.backgroundImage = "url('https://cdn.discordapp.com/attachments/630047188520665121/789416557692452884/Taskbar_application.png')";}}
And having this else where in the html so you don't have to keep calling "true" to each window if you have multiple.
function inactiveall() {
tumblrButtonOpen = true;
document.getElementById("postwindow").style.backgroundImage = "url('https://cdn.discordapp.com/attachments/630047188520665121/791328235451318342/title-bar_postheaderinactive.png')";
document.getElementById("taskapp1").style.backgroundImage = "url('https://cdn.discordapp.com/attachments/630047188520665121/789420847604564008/Taskbar_application1.png')";
}
Then to actually create the script for the window for when the window is clicked onto;
function tumblractive() { tumblrButtonOpen = false;
document.getElementById("post").style.zIndex = (currentno = currentno + 1); currentno = currentno + 1;
document.getElementById("postwindow").style.backgroundImage = "url('https://cdn.discordapp.com/attachments/630047188520665121/791321110750298162/title-bar_postheader.png')";
document.getElementById("taskapp1").style.backgroundImage = "url('https://cdn.discordapp.com/attachments/630047188520665121/789416557692452884/Taskbar_application.png')";
}
Example is used here; https://thealonic.tumblr.com/ (all the windows use the same scripts with different names and alterations for different functionability)
I am new to web development, so I am taking a Pluralsight course called "Building a Web App with ASP.NET Core RC1, MVC 6, EF7 & AngularJS" by Shawn Wildermuth. In his jQuery module, Shawn has this piece of code that works flawlessly for him:
var main = $("#main");
main.on("mouseenter", function() {
main.style = "background-color: #888;";
});
main.on("mouseleave", function() {
main.style = "";
});
I have a div with id="main" on my index.html page, js file is referenced, other jQuery functionality in the same file works, I just can't get this piece of code to work. I know it is not significant, but at this point it is personal. Any suggestions are helpful. Thank you!
As style is a property of native DOM element and main is a jQuery object. You can use .css() and .removeAttr() jQuery method to get the desired result.
var main = $("#main");
main.on("mouseenter", function() {
main.css("background-color": "#888");
});
main.on("mouseleave", function() {
main.removeAttr('style');
});
You can't access the style property like this. Try the following:
var main = $("#main");
main.mouseenter(function() {
main.css("background-color", "#888");
});
main.mouseleave(function() {
main.css("background-color", "none");
});
Try this:
var main = document.getElementById("main");
main.onmouseenter=function(){
main.setAttribute('style', 'background-color:#888;');
};
main.onmouseleave=function(){
main.removeAttribute("style")
};
I have a web app made of several jsp files, several of which make use of common jscript modules. My problem is that I am having difficulties accessing common data between the jscript modules in IE8.
For example - In a jsp file:
<script for="window" event="onload">
// My globals.
myGlobals = new Object();
// Attach it to the window for maximum availability.
window.myGlobals = myGlobals;
// Add some fields to it.
// List is actually built from external data so cannot be included from external file.
myGlobals.filters = [
'Filter-Women',
'Filter-Men',
'Filter-Girls',
'Filter-Boys',
];
myGlobals.filtered = '';
</script>
and in a separate js file:
function filter(f) {
for (var i = 0;i < myGlobals.filters.length;i++){
if ( 'Filter-'+f == myGlobals.filters[i] ) {
filterIn(document.getElementById(myGlobals.filters[i]));
} else {
filterOut(document.getElementById(myGlobals.filters[i]));
}
}
myGlobals.filtered = f;
}
function filterIn(e) {
e.classList.add('filterselected');
}
function filterOut(e) {
e.classList.remove('filterselected');
}
and in my jsp - the list is also built from the same external data as above:
<div class="filterbuttons">
<a id="Filter-Women" onclick="filter('Women')">WOMEN</a>
<a id="Filter-Men" onclick="filter('Men')">MEN</a>
<a id="Filter-Girls" onclick="filter('Girls')">GIRLS</a>
<a id="Filter-Boys" onclick="filter('Boys')">BOYS</a>
</div>
Now this all works fine in Firefox but customer also needs this to work in IE8. There, the myGlobals structure is not available, not even from the window. Any ideas?
Problem solved!
Change:
<script for="window" event="onload">
to just plain:
<script>
and everything works fine again.
I have problem to put my own Javascript in a separate file and use it from JQWicket (testing Drag & drop plugin). Here is myscript.js:
com.mycompany.Test = function() {
return {
test_func: function() {
$('#msg').text('X position = ' + ui.position.left + ', Y position = ' + ui.position.top);
}
}
}
And in the java I want to call test_func:
DraggableOptions drop = new DraggableOptions().dragEvent(
"com.mycompany.Test.test_func()");
But it does not work! I think the problem is that myscript.js is included before jquery.js and I do not know how to reorder include statements.
I'm very grateful if anyone has a working example with a separate javascript file that is called from jqwicket!
Thanks in advance!
Add an JQBehavior instance referencing "myscript.js" to your component/page like this:
JQBehavior behavior = new JQBehavior();
behavior.addJsResourceUrls("myscript.js");
Component comp = .... ;
comp.add(behavior);
I'm not a JS expert but i think what i'm trying to do is pretty simple (at least in jQuery)
I've got 3 select
<select id="faq" class="onchance_fill">...</select>
<select id="pages" class="onchance_fill">...</select>
<select id="faq" class="onchance_fill">...</select>
and an input (it's a tinyMCE one in advlink plugin)
<input type="text" onchange="selectByValue(this.form,'linklisthref',this.value);" value="" class="mceFocus" name="href" id="href" style="width: 260px;">
I want that each time i change a value in one of the 3 select, that this value of the option, will be placed in the input.
In Jquery, it would be something like :
$('.ajax_onchance_fill').change(function() {
data = $('.ajax_onchance_fill').val();
$('#href').text(data);
});
But i can't use it. So what is the equivalent in plain Javascript ?
Thanks
I would advice you keep using Jquery as it speeds up this kind of thing but in pure JavaScript i think what you want looks something like this...
<script type="text/javascript">
function load() {
var elements = document.getElementsByClassName('onchance_fill');
for(e in elements){
elements[e].onchange = function(){
document.getElementById('href').value = this.value;
}
}
}
</script>
document.getElementsByClassName("ajax_onchance_fill").onchange = function() {
getElementById('href').value = this.options[this.selectedIndex].text;
};
Though I am not sure exactly if it'll work since getElementsByClassName returns more than 1 element.
Try this:
$('.ajax_onchance_fill').change(function() {
var data = $(this).val();
$('#mytextboxid').val(data);
});
Okay, so I realize this thread is well over 8 years old, so this answer isn't so much for the OP (who probably figured it out long ago) as it is for someone else who might be curious about this particular topic.
All that said, here's a relatively simple and reliable way you could pull it off in vanilla JS:
/**
* Since we need to listen to all three ajax_onchance_fill elements,
* we'll use event delegation.
*
*/
const targetLink = document.getElementById('href');
document.addEventListener('change', function(e) {
if (!!Element.prototype.matches) { // Let's make sure that matches method is supported...
if (e.target.matches('.ajax_onchance_fill')) {
targetLink.textContent = e.target.value;
}
} else { // and if not, we'll just use classList.contains...
if (e.target.classList.contains('ajax_onchance_fill')) {
targetLink.textContent = e.target.value;
}
}
});