the hosting company loads a script on all their sites that is allowing for the tabs to be dragged/dropped , however it is also causing the caption images within the same body_home page to be drag/drop , i have requested this be fixed but i don't think they are concerned.
I am permitted to load my own jquery, javascript , html ,css onto the site to do changes , but i can not stop the host from loading this js file , so how can i reverse this ? Here is a snippet of the portion of the js file i think that is causing this problem .
I am permitted to load my own footer and header messages , so is there anyway i can remove what they are doing here , or reverse the effect on the captions ?
i cant find a way for the listener to be removed from outside.
They have used an anonymous function on the event 'domready' .
Does javascript have a feature to remove the listener from outside the anonymous method
window.onload=function() {
if (document.getElementById("body_home")) {
set_up_double_click_events();
if (document.getElementById("homepagetabs") && document.getElementById("tab2")) {
new Sortables($('homepagetabs'), {
onComplete: function() {
var parent = this.element.parentNode;
var saveIt = false;
if (typeof currentTabOrder == "undefined") {
currentTabOrder = new Array();
for (var i = 0; i < parent.getChildren().length; i++) {
currentTabOrder[i] = i;
}
}
for (var i = 0; i < parent.getChildren().length; i++) {
var seqno = parent.getChildren()[i].id.substr("tab".length);
if (currentTabOrder[i] != seqno) {
saveIt = true;
currentTabOrder[i] = seqno;
}
}
if (saveIt) {
var url = window.location.protocol + "//" + window.location.host + "/" + year + "/save_setting?L=" + league_id + "&TITLE=TABORDER&VALUE=" + currentTabOrder.join();
makeHttpRequest(url);
}
}
});
}
window.addEvent('domready', function() {
new Sortables('.homepagemodule CAPTION', {
clone: true,
revert: true,
opacity: 0.7,
onStart: function() {
dndMovingModule = this.element.parentNode.parentNode.id.toUpperCase();
},
onComplete: function() {
dndDroppedOntoModule = this.element.parentNode.parentNode.id.toUpperCase();
if (typeof dndMovingModule != "undefined" && typeof dndDroppedOntoModule != "undefined" && dndMovingModule != dndDroppedOntoModule) {
var url = window.location.protocol + "//" + window.location.host + "/" + year + "/save_setting?L=" + league_id + "&TITLE=MODULE&VALUE=" + dndMovingModule + "," + dndDroppedOntoModule;
// alert("calling: " + url);
makeHttpRequest(url);
setTimeout("window.location.reload();", 250);
}
}
});
});
}
}
$(document).ready(function() {
$('#DIVID').on('mousedown', function(e) {
return false;
});
});
I would put an HTML class attribute on all of your images that are producing the problem. Obviously, jQuery uses CSS style selectors. See the following example.
$(function(){
$('.ElementClass').mousedown(function(){
return false;
});
});
When you return false; onmousedown it prevents the default behavior in most Browsers, which is to grab the image so the Client can drop and drag the image into into a new tab or window to view it with their Browser.
Related
I keep getting all sorts of errors with this code. It is supposed to be a Gamebook engine code. A simple one. I am getting all sorts of things wrong with this and I do not know why.
My console keeps saying that line 1 () is undefined 404 not found.
Second, all my content keeps loading at the bottom of the page.
Third... An image should be loading on screen but is not. If I added a movie, it will play the movie, but not show the image.
Can you tell me what I am doing wrong?
EDIT: Fixed code to represent Solution:
<html>
<style>
objdc {
cursor: pointer;
text-decoration: underline;
color: blue;
}
</style>
<body>
<div>
<div id="StartRoomLoad" name="StartRoomLoad"></div>
<div id="StartRoomText"></div>
</div>
</body>
<script type="text/javascript" src="gamebook.js"></script>
<script>
var GameObjects = {
'titlescreen': [
['RoomName', 'Title Screen'],
['RoomDesc', 'Your first room Desc. Go to <objdc id="room2">Room 2</objdc>'],
['XRes', '320'],
['YRes', '240'],
['RmImg', 'http://selmiak.bplaced.net/games/c64/zak/room/74_intro_00_256.png'],
['RmMov', '']
],
'room2': [
['RoomName', 'Title Screen'],
['RoomDesc', 'Your first non-title screen room. Go back to the <objdc id="titlescreen">title screen room</objdc>'],
['XRes', '320'],
['YRes', '240'],
['RmImg', 'http://selmiak.bplaced.net/games/c64/zak/room/74_intro_00_256.png'],
['RmMov', '']
]
}
var GAMENAME = '';
var OBJECTGLOBAL = ''; //Indicates the current OBJECT loaded.
var GAMECURPLAYER = ''; //Indicates the current player you control.
var GAMESCORE = '0';
var GLOBALSETCLS = false;
const OBJECTNAME = 0;
const OBJECTDESC = 1;
const OBJECTXSIZE = 2;
const OBJECTYSIZE = 3;
const OBJECTIMAGE = 4;
const OBJECTMOVIE = 5;
function replaceAll(str, find, replace) {
return str.replace(new RegExp(find, 'g'), replace);
} //end function ParsePlayerInput
function LoadRoom(roomname) {
//Loads the specified room and sets the global setting. If a movie file is specified, the engine will play the movie file first. Once the movie is done, it will load the room image. Currently, the video will only play thru once. Once it is played, it will just show an image. If no movie is specified, it will load simply the room background image. If no image is present, it will show no image.
OBJECTGLOBAL = roomname;
if (GameObjects[OBJECTGLOBAL][OBJECTMOVIE][1] != '') {
document.getElementById("StartRoomLoad").innerHTML = '<video id="mainvid" onerror="hidevideo(OBJECTGLOBAL);" onended="hidevideo(OBJECTGLOBAL);" width="100%" height="" autoplay>' + '<source src="' + GameObjects[OBJECTGLOBAL][OBJECTMOVIE][1] + '" type="video/mp4"></video>';
} else if (GameObjects[OBJECTGLOBAL][OBJECTIMAGE][1] != '') {
//console.log(GameObjects[OBJECTGLOBAL][OBJECTIMAGE][1]);
document.getElementById("StartRoomLoad").innerHTML = "<img src='" + GameObjects[OBJECTGLOBAL][OBJECTIMAGE][1] + "' id='RoomBackground' width='" + GameObjects[OBJECTGLOBAL][OBJECTXSIZE][1] + "' height='" + GameObjects[OBJECTGLOBAL][OBJECTYSIZE][1] + "'></image>";
}
document.getElementById("StartRoomText").innerHTML = GameObjects[OBJECTGLOBAL][OBJECTDESC][1];
}
function hidevideo(roomname) {
//This function is called once a video is played on room enter. It will close the video and then show the image if there is one.
var x = document.getElementById("mainvid");
var y = document.getElementById("RoomBackground");
x.style.display = "none";
if (GameObjects[OBJECTGLOBAL][OBJECTIMAGE][1] != '') {
document.getElementById("StartRoomLoad").innerHTML = "<img src='" + GameObjects[OBJECTGLOBAL][OBJECTIMAGE][1] + "' id='RoomBackground' width='" + GameObjects[OBJECTGLOBAL][OBJECTXSIZE][1] + "' height='" + GameObjects[OBJECTGLOBAL][OBJECTYSIZE][1] + "'></image>";
}
}
LoadRoom('titlescreen');
var spans = document.getElementsByTagName('objdc');
for (i = 0; i < spans.length; i++)
spans[i].onclick = doRoomLoad;
function runSPANS() {
var spans = document.getElementsByTagName('objdc');
for (i = 0; i < spans.length; i++)
spans[i].onclick = doRoomLoad;
}
//document.getElementsByTagName('objdc').addEventListener('click',doRoomLoad,false);
function doRoomLoad() {
//var room = document.getElementById(this.id);
LoadRoom(this.id);
runSPANS();
}
</script>
</html>
The reason it works on IE and not Chrome is that your if statement is relying on a weird equality edge case. Take a look at this line:
if (GameObjects[OBJECTGLOBAL][OBJECTMOVIE][1] != ''){
GameObjects[OBJECTGLOBAL][OBJECTMOVIE] evalutes to the array ["RmMov"]. Therefore, GameObjects[OBJECTGLOBAL][OBJECTMOVIE][1] is undefined.
Comparing undefined to '' is a pretty weird equality check, so IE is interpreting this whole statement as false and Chrome as true.
Anyway, it's assuming that there will be a second value in your array, but there isn't. To fix it, change ['RmMov',] and ['RmMov'] to ['RmMov', ''].
That should work.
I've made a function which cycles through the DOM of a targeted are (via id) to create a rollover functionality.
My problem lies within the rollOver/rollOut function. For some reason the environment where I run this script seems to mess with the srcset attribute.
This is the original:
function rollOver(elem) {
(document.getElementById(elem).srcset =
"https://staging.elizabetharden.pfsweb.demandware.net/on/demandware.static/-/Sites-JuicyCoutureBeauty-Library/default/dw685f8968/images/home-page/desktop/eyes-on-you-desktop-hover-" +
elem.slice(6) +
".jpg?$staticlink$"),
"https://staging.elizabetharden.pfsweb.demandware.net/on/demandware.static/-/Sites-JuicyCoutureBeauty-Library/default/dw685f8968/images/home-page/desktop/eyes-on-you-desktop-2x-hover-" +
elem.slice(6) +
".jpg?$staticlink$ 2x";
}
function rollOut(elem) {
(document.getElementById(elem).srcset =
"https://staging.elizabetharden.pfsweb.demandware.net/on/demandware.static/-/Sites-JuicyCoutureBeauty-Library/default/dw685f8968/images/home-page/desktop/eyes-on-you-desktop-" +
elem.slice(6) +
".jpg?$staticlink$"),
"https://staging.elizabetharden.pfsweb.demandware.net/on/demandware.static/-/Sites-JuicyCoutureBeauty-Library/default/dw685f8968/images/home-page/desktop/eyes-on-you-desktop-2x-" +
elem.slice(6) +
".jpg?$staticlink$ 2x";
}
rollOver:
path/to/image/eyes-on-you-desktop-hover-" + elem.slice(6) + ".jpg?$staticlink$"
rollOut:
path/to/image/eyes-on-you-desktop-" + elem.slice(6) +".jpg $staticlink$"
The elem variable comes from here...
document.addEventListener("DOMContentLoaded", function (event) {
var rollOverCollectionA = document
.getElementById("roll-over-collection-b")
.getElementsByClassName("rollover");
rollOverCollectionA = Array.prototype.slice.apply(rollOverCollectionA);
var l = rollOverCollectionA.length;
for (let i = 0; i < l; i++) {
on("mouseover", `#${rollOverCollectionA[i].id}`, function () {
rollOver(rollOverCollectionA[i].id);
});
on("mouseout", `#${rollOverCollectionA[i].id}`, function () {
rollOut(rollOverCollectionA[i].id);
});
}
});
and its just the #id value on the elem which gets sliced to coincide with the element which is receiving focus.
I tried something like this:
function rollOver(id, elem ) {
elem.srcset = elem.srcset.splice(174, 0, '-hover');
elem.srcset = elem.srcset.splice(362, 0, 'hover-')
document.getElementById(id).srcset = elem.srcset;
}
function rollOut(id, elem) {
document.getElementById(id).srcset = elem.srcset;
}
But what that does is continually add 'hover to the elem.srcset/string !
UPDATE
This is a working demo.
UPDATE
This is an example of what is happening.
The rollover appends hover to the non-hover state, but then the next time you hover the src now has `xxx-1-hover-hover.jpg
Any help would be appreciated!
This is Function for background image.
$(document).ready(function() {
// // Set Background Image;
// var path = GetBasePath() + "images/bg.jpg";
$('body').css({
'background': 'url("' + GetBasePath() + '/images/bg.jpg") no-repeat center fixed',
'background-size': 'cover'
});
This is the function used for getting the base path.
function GetBasePath() {
// var pageUrl = document.URL;
// var pageUrlParts = pageUrl.split('/');
// var pageUrlPartsLength = pageUrlParts.length;
var neededUrl = '';
var trigger = true;
var pathArray = window.location.pathname.split('/');
neededUrl = window.location.protocol + "//" + window.location.host;
// neededUrl = pageUrlParts[0];
for (var i = 1; i < pathArray.length; i++) {
if (trigger) {
neededUrl = neededUrl + '/' + pathArray[i];
}
if (pathArray[i] == bookFolder) {
trigger = false;
}
};
// alert(neededUrl);
return neededUrl;
console.log(neededUrl);
Every thing works good but expect this extra basepath that i didn't want.
This is the inspect element code. And have extra basepath. Like ip-screen.html
<body style="background:
url("http://localhost/TeacherGuide/Human_Systems_Interactions/ip-screen.html/images/bg.jpg")
center center / cover no-repeat fixed;">
This will work fine if i remove ip-screen.html manually, but i don't know how to do this in js function. Need help. Any one?
As I Understand, please replace "ip-screen.html" from URL like below
var z="http://localhost/TeacherGuide/Human_Systems_Interactions/ip-screen.html/images/bg.jpg"
z=z.replace("/ip-screen.html/","/");
console.log(z);
This Javascript controls a Monial Content box with forward and back buttons to move forwards or backwards but it only works for 2 DIVs, how can I make this script work with an array so I can add more elements?
e.g.
Current Script Diagram
The Script Code
$(document).ready(function(e) {
showQuote();
$(".left").click(function(e) {
$("#monial_btn_1").trigger("click");
});
$(".right").click(function(e) {
$("#monial_btn_2").trigger("click");
});
$("#monial_btn_1").click(function(e) {
$(".monial_content_1").fadeIn("fast");
$(".monial_content_2").fadeOut("fast");
var obj=$(this);
obj.removeClass();
obj.addClass("monial_btn_selected");
obj=$("#monial_btn_2");
obj.removeClass();
obj.addClass("monial_btn");
});
$("#monial_btn_2").click(function(e) {
$(".monial_content_1").fadeOut("fast");
$(".monial_content_2").fadeIn("fast");
var obj=$(this);
obj.removeClass();
obj.addClass("monial_btn_selected");
obj=$("#monial_btn_1");
obj.removeClass();
obj.addClass("monial_btn");
});
var n = 10
for(i = 1; i < n; i++) {
$("#monial_btn_" + i).click(function(e) {
$(".monial_content_" + i).fadeIn("fast");
$(".monial_content_" + (i + 1)).fadeOut("fast");
var obj=$(this);
obj.removeClass();
obj.addClass("monial_btn_selected");
obj=$("#monial_btn_" + (i + 1));
obj.removeClass();
obj.addClass("monial_btn");
});
}
http://www.kars4kids.org/charity/v2/nirangahtml/program_pop/meet_animals.asp
above link,
when I select one of icon at below.
it's change to selected states, but problem is I need to restrict hover effect and further selecting for that Icon . ( since I am using Image changing).
below is the my complete, jquery code.
$(document).ready(function(){
$('#animal_content_text_horse').css("display", "block");
$('#animal_pic_horse_span').css("display", "block");
$('#page_animal_img_horse').css("display", "block");
$('.animal_thumb_link').each(function() {
$(this).click(function(e) {
e.preventDefault();
default_set($(this).attr('id'));
$(".animal_thumb_link").removeClass("thumbselected");
$(this).addClass("thumbselected");
$(".animal_thumb_link").find('img').addClass("imgHoverable");
$(this).find('img').removeClass("imgHoverable");
});
});
// Change the image of hoverable images
$(".imgHoverable").hover( function() {
var hoverImg = HoverImgOf($(this).attr("src"));
$(this).attr("src", hoverImg).hide().fadeIn(0);
}, function() {
var normalImg = NormalImgOf($(this).attr("src"));
$(this).attr("src", normalImg).show();
}
);
function HoverImgOf(filename)
{
var re = new RegExp("(.+)\\.(gif|png|jpg)", "g");
return filename.replace(re, "$1_r.$2");
}
function NormalImgOf(filename)
{
var re = new RegExp("(.+)_r\\.(gif|png|jpg)", "g");
return filename.replace(re, "$1.$2");
}
});
function default_set(obj12){
var arr = ["horse_content", "camel_content", "peacock_content", "goat_content", "donkey_content", "rooster_content", "sheep_content", "alpacas_content", "cynthia_content", "rabbit_content", "cow_content"];
var arr2 = ["../images/horse_thumb.gif", "../images/camel_thumb.gif", "../images/peacock_thumb.gif", "../images/goat_thumb.gif", "../images/donkey_thumb.gif", "../images/rooster_thumb.gif", "../images/sheep_thumb.gif", "../images/alpacas_thumb.gif", "../images/cynthia_thumb.gif", "../images/rabbit_thumb.gif", "../images/cow_thumb.gif"];
for ( var i = 0; i <= arr.length; i++ ) {
if ( arr[ i ] === obj12 ) {
old_url = $("#" + obj12).children('img').attr('src');
new_url = old_url.replace(/thumb/,'thumb_r');
$("#" + obj12).children('img').attr('src',new_url);
}else{
$('#' +arr[ i ]).children('img').attr('src',arr2[ i ]);
}
}
}
function load_page(obj1,obj2,obj3){
/* detect current div if so hide */
current_pagepharadiv = document.getElementById("pagepharadiv_hidden").value;
current_pageheadertext = document.getElementById("pageheadertext_hidden").value;
current_pageimage = document.getElementById("pageimage_hidden").value;
$('#' + current_pagepharadiv).css("display", "none");
$('#' + current_pageheadertext).css("display", "none");
$('#' + current_pageimage).css("display", "none");
image_hover(obj1);
image_hover(obj2);
$('#' + obj3).fadeIn("fast");
//image_hover(obj3);
//$('#' + obj1).fadeIn("fast");
//$('#' + obj2).fadeIn("fast");
document.getElementById("pagepharadiv_hidden").value = obj1;
document.getElementById("pageheadertext_hidden").value = obj2;
document.getElementById("pageimage_hidden").value = obj3;
}
can you please advice guys,
cheers!
It seems to me that you're really making things more complicated than they need to be. Here's how I would implement the page:
Bottom squares as divs, make the images transparent pngs
Change bottom square color using css :hover
Generate the entire top content on the server for each animal in a div: so you have 11 divs one after the other, instead of having to hide/show things in 3 places. In my code example below I assume they have the class animal-content
Add the id of each top div as a html5 data attribute to the corresponding thumb link
This way all you need to do in jQuery is:
$(".animal_thumb_link").click(function() {
var topId = $(this).data("topId");
$(".animal_thumb_link").removeClass("thumbselected");
$(this).addClass("thumbselected");
$(".animal-content").toggle(function() { return this.id === topId; });
});