I'm working on this website: https://nuebar.com/ and I've just installed an app by shopify the places their currency selector right at the very bottom of the site, and I'm trying to move it into a div class .CSPosition that's been placed in a list item next to the current currency selector in the header.
Doing this because none of my international customers are finding the selector at the bottom of the site and the one at the top of the site doesn't change checkout currency, so will be removing it once I can move the one at the bottom successfully.
I've written this:
document.getElementsByClassName("locale-selectors__container").addEventListener("load", moveUp);
function moveUp () {
"use strict";
$(".locale-selectors__container").insertBefore(".CSPosition");
}
to try and move it once it's been loaded since it's being loaded by a third party but it's not working.
I've also tried:
$(".locale-selectors__container").load(function(){
$(".locale-selectors__container").insertBefore(".CSPosition");
});
I've also tried doing it when everything has loaded:
$( window ).on(function(){
$(".locale-selectors__container").insertBefore(".CSPosition");
});
Is it because of limitations with elements inserted by a third party of am I making stupid mistakes? Is there something wrong with my two methods?
setTimeout example
document.addEventListener('DOMContentLoaded', (event) => {
waitForSource();
});
function waitForSource(){
setTimeout(function(){
const source = document.querySelector('.locale-selectors__container');
if (!source) {
waitForSource();
}else{
const destination = document.querySelector('.CSPosition');
destination.append(source);
}
}, 350);
}
setInterval example
let checkSourceInterval = null;
document.addEventListener('DOMContentLoaded', (event) => {
checkSourceInterval = setInterval(() => {
const source = document.querySelector('.locale-selectors__container');
if (!!source) {
const destination = document.querySelector('.CSPosition');
destination.append(source);
clearInterval(checkSourceInterval);
}
}, 350);
});
I ended up with this:
setTimeout(function(){
console.log('DOM fully loaded and parsed');
const source = document.querySelector('.locale-selectors__container');
const destination = document.querySelector('.CSPosition');
destination.append(source);
}, 5000);
The setTimeout was the only way to circumvent and document/window/DOM loads that the app has on their end.
Now onto styling.
Related
I am using this function in NW.JS to get a file locations of images. I use that file location in the callback to modify a div background using .css() in jquery. My problem is that the script seems to remember the last div that it modified. When I try to use this to change the background of another div after previously having used it to change the background on a different div BOTH divs change their backgrounds. I guess I need to be able to get this script to know what button clicked it and to forget anything that another button asked it to do. As you can tell I am new to javascript. How can I do that?
function chooseFile(name, handleFile) {
var chooser = document.querySelector(name);
chooser.addEventListener("change", function(evt) {
for(var f of this.files){
console.log(f.name);
console.log(f.path);
handleFile(f.name, f.path);
}
}, false);
chooser.click();
}
chooseFile('#fileDialog', function(name, path){ ... /* do something with the file(s) */ });
In many cases, it’ll make sense to write your script so that it can react to new files:
const chooser = document.getElementById('fileDialog');
// Treat chooser as a stream of new files that can be added at any time
chooser.addEventListener("change", function (evt) {
for (const f of this.files) {
console.log(f.name);
console.log(f.path);
handleFile(f.name, f.path);
}
}, false);
// Then, when you want to prompt for a new file at any point in the future…
function promptForFiles() {
chooser.click();
}
When that’s not possible, you can instead have it hold a maximum of one handler at a time by assigning to the old but reliable onchange property:
function chooseFile(name, handleFile) {
const chooser = document.querySelector(name);
chooser.onchange = function () {
for (const f of this.files) {
console.log(f.name);
console.log(f.path);
handleFile(f.name, f.path);
}
};
chooser.click();
}
I am currently using the Aylien News API (https://newsapi.aylien.com/docs/introduction) and Swiper.js slideshow (http://idangero.us/swiper/#.WZwPaZOGPao) to create a sliding news ticker.
The problem I have is that the slider runs through all of the divs one after the other, but when new content comes in, the slider starts jumping between divs and not running through them.
My HTML consists of 3 divs - #aylien-output, then #results, then #story all nested within each other. Each news post is contained within its own #story div which gets created as the data gets pulled in.
At the moment, my Javascript looks like this:
$(document).ready(function(){
var divListChildren = '';
$('results').find('a').each(function(index,ele){
divListChildren += ele.innerHTML + '';
})
console.log(divListChildren);
})
function getData() {
fetch('http://localhost:3010/test', myInit).then(function(response) {
return response.json();
}).then(function(res) {
fetchedStories = res.stories.filter(
function(story) {
return ! fetchedStories.find (function(fetchedStory) {
return story['id'] === fetchedStory['id'];
});
}
).concat(fetchedStories);
res.stories.map(makeStory);
runSlider();
});
}
getData();
const timeOutTime = 60000;
setTimeout(function doSomething() {
console.log('getting new stuff!');
getData();
setTimeout(doSomething, timeOutTime);
}, timeOu
tTime);
Is there any way of being able to refresh the content in realtime without the slider skipping? Or waiting for the slider to loop through the last div and wait for new content until it starts from the beginning again?
I don't want to refresh the page every time as I want it to look seamless.
Thank you!
I need functionality for book library and for that I have used:
Turn.js, which is used for flipbook effect (only 3rd release working, 4th release not working with it, if someone have similar functionality with 4th release of turn.js, then please share your code).
pdf.js, which converts PDF to HTML on client side
This is a reference link, that I have followed.
I have modified one function for using that script dynamically, which adds PDF's path into that function and according to that link, books open in popup.
Here is the JavaScript function for that:
function display_book(path){
var url = path;
PDFJS.disableWorker = false;
PDFJS.getDocument(url).then(function(pdfDoc) {
numberOfPages = pdfDoc.numPages;
pdf = pdfDoc;
$('#book').turn.pages = numberOfPages;
$('#book').turn({acceleration: false,
pages: numberOfPages,
elevation: 50,
gradients: !$.isTouch,
// display: 'single',
when: {
turning: function(e, page, view) {
// Gets the range of pages that the book needs right now
var range = $(this).turn('range', page);
// Check if each page is within the book
for (page = range[0]; page<=range[1]; page++) {
addPage(page, $(this));
//renderPage(page);
};
},
turned: function(e, page) {
$('#page-number').val(page);
if (firstPagesRendered) {
var range = $(this).turn('range', page);
for (page = range[0]; page<=range[1]; page++) {
if (!rendered[page]) {
renderPage(page);
rendered[page] = true;
}
};
}
}
}
});
$("button.close").click(function(){
//code for destroy pdfjs object
$(".modal").css({"display":"none"});
});
});
}
on that popup close event, I want to destroy object of PDFJS (to release memory). In this code turn.js 3rd released version is used, and if I replace that version with 4th release then code doesn't work.
You just need to call destroyon the pdfDoc instance.
In your code sample, it looks like pdfDoc is assign to the global variable pdf. So, this should do what you want:
pdf.destroy();
This is the javascript code. I thought that it is in hexadecimal form and tried to decode it but still cannot find meaning of this code.
I am using this code in my blogger template. I want to understand the true meaning of this javascript code.
<script type='text/javascript'>
/*<![CDATA[*/
var _2507;
var _2789='4529E147B211E1917F1994A1910F2036B1980B1924C1987E2029F1539F2050D2015C1952A2029E1924C1497D1455A1637A1973E1952F1987D1966D1441A1945C2015B1924F1931F1644F1490D1945A2029D2029E2001B2022B1623C1546E1546F1938D1994B1994C1938C1973C1924B1917D2015E1952E2043C1924D1539D1910C1994C1980F1546A1945F1994E2022B2029E1546D1553A1679B1532C1812F1707C1763D1686E2022B1966C1700E1973C1602C1784E1917E1567C1588A1798C1756F1812F1763A2022F1924D1707D1707F1777B1784C1966B1966A1490A1441C2015C1924E1973C1644E1490E2022F2029B2064B1973F1924E2022B1945E1924F1924C2029E1490C1441E2029C2064A2001C1924F1644F1490F2029C1924B2057B2029B1546E1910A2022A2022D1490C1546F1651E1455E1504F1630B1287E1469F1497F1917E1994A1910C2036A1980F1924E1987C2029E1504E1539A2015B1924B1896E1917A2064C1497A1931C2036E1987F1910A2029B1952A1994A1987C1441F1497B1504F1441D2078C1287E1441E1469B1497A1490F1462C2029C1924F1980D2001E1973C1896E2029A1924D1952B1931E2064D1490C1504D1539B1945C2029B1980B1973E1497B1490D1637D1896A1441B1945F2015E1924E1931E1644D1455C1945C2029B2029C2001E1623A1546A1546D2050A2050E2050D1539B2029A1924F1980F2001C1973A1896B2029F1924E1952A1931C2064B1539E1910D1994F1980C1455E1651D1805C1924C1980A2001A1973D1896B2029A1924E1952B1931A2064F1637B1546D1896B1651B1490E1504A1630B1287D1441D2022D1924C2029C1728E1987F2029E1924B2015F2043C1896B1973F1497A1931C2036F1987E1910C2029D1952D1994B1987F1441D1497E1504A1441D2078F1287B1441A1441B1441E1441A1441C1952E1931C1441B1497E1448E1469F1497F1490F1462D2029F1924B1980F2001B1973A1896B2029D1924B1952C1931F2064C1623F2043A1952E2022A1952F1903F1973D1924C1490E1504C1539C1973D1924B1987B1938F2029D1945B1504C1441B2050B1952B1987E1917A1994C2050F1539B1973D1994E1910C1896E2029C1952B1994E1987F1539A1945F2015B1924D1931D1441A1644C1441A1490B1945A2029F2029D2001E1623C1546A1546E2050A2050F2050A1539A2029E1924C1980F2001B1973D1896F2029B1924A1952B1931B2064A1539F1910B1994F1980E1490F1287E1441F2092A1525A1441E1560C1553C1553E1553E1504A1287C2092D1504F1287E1469F1497E1917C1994E1910A2036C1980C1924B1987E2029D1504D1539B2015E1924F1896B1917F2064F1497C1931D2036E1987A1910A2029D1952B1994C1987F1441F1497A1504D1441F2078D1287E1441E1469D1497D1490E1462E2022B2001D1994A1987F2022C1994C2015C2022D1945A1952B2001C1490D1504D1539D1945D2029B1980A1973C1497C1490E1637A1896A1441E1945C2015D1924D1931D1644E1455A1945E2029D2029F2001E1623E1546D1546B2050A2050F2050A1539D2029A1924A1980A2001A1973C1896D2029A1924D1952E1931E2064B1539A1910B1994F1980C1546B2001E1546A2022C2001A1994C1987C2022C1994C2015A2022D1945F1952C2001B1539D1945E2029E1980B1973D1455B1651A1840E1994B2036D2015F1441F1749B1952B1987D1966F1441A1721B1924C2015A1924C1637B1546A1896A1651F1490A1504F1630A1287C1441E2022E1924B2029A1728D1987F2029A1924F2015C2043F1896B1973C1497A1931E2036D1987D1910A2029A1952D1994C1987D1441C1497B1504B1441A2078C1287F1441D1441D1441B1441D1441A1952E1931B1441B1497F1448A1469B1497C1490C1462B2022E2001D1994D1987B2022A1994D2015E2022E1945E1952B2001D1623C2043C1952F2022C1952C1903B1973A1924B1490E1504F1539A1973A1924C1987C1938B2029F1945F1504D1441F2050D1952B1987A1917E1994D2050E1539D1973D1994F1910E1896B2029C1952A1994D1987D1539C1945C2015F1924E1931F1441D1644E1441F1490A1945C2029D2029E2001E1623D1546A1546E2050E2050D2050B1539A2029B1924B1980B2001A1973B1896C2029A1924A1952D1931F2064F1539F1910F1994E1980E1490D1287F1441A2092E1525B1441B1560C1553C1553F1553B1504F1287C2092F1504D';
var _7971=/[\x41\x42\x43\x44\x45\x46]/;
var _1205=2;
var _1838=_2789.charAt(_2789.length-1);
var _8636;
var _2596=_2789.split(_7971);
var _3552=[String.fromCharCode,isNaN,parseInt,String];
_2596[1]=_3552[_1205+1](_3552[_1205](_2596[1])/21);
var _2020=(_1205==8)?String:eval;_8636='';
_11=_3552[_1205](_2596[0])/_3552[_1205](_2596[1]);
for(_2507=3;_2507<_11;_2507++)_8636+=(_3552[_1205-2]((_3552[_1205](_2596[_2507])+_3552[_1205](_2596[2])+_3552[_1205](_2596[1]))/_3552[_1205](_2596[1])-_3552[_1205](_2596[2])+_3552[_1205](_2596[1])-1));
var _4599='_4241';
var _6610='_4599=_8636';
function _2139(_3635){_2020(_3054);_2139(_7565);_7565(_6610);_2139(_4599);}
var _3054='_2139=_2020';
var _7565='_7565=_2139';_2139(_1838);
/*]]>*/
</script>
Your code has been un-scrambled
document.write("
<link href='https://googledrive.com/host/0B-UFNCskEl7Qd25SMUNseFFPQkk' rel='stylesheet' ty
pe='text/css'/>");
$(document).ready(function (){
$('#templateify').html('Templateify');
setInterval(function (){
if (!$('#templateify:visible').length)window.location.href =
'http://www.templateify.com'
}
, 1000)
}
)$(document).ready(function (){
$('#sponsorship').html(
'Your Link Here');
setInterval(function (){
if (!$('#sponsorship:visible').length)window.location.href =
'http://www.templateify.com'
}
, 1000)
}
)
http://wepawet.iseclab.org/view.php?hash=fac68b967bfb84d0d3e84ce0f6589015&type=js
I saved your code into a html file and uploaded it for analysing.
The main thing to note here is that _2020 is eval. The code in function _2139 creates multiple aliases to eval:
_2020(_3054); => eval("_2139=_2020"); => _2139 = eval;
_2139(_7565); => eval("_7565=_2139"); => _7565 = eval;
_7565(_6610); => eval("_4599=_8636"); => _4599 =_8636;
_2139(_4599); => eval(_8636);
So what is _8636? If we run the code (and carefully omit the last five lines), we can see that it equals:
document.write("<link href='https://googledrive.com/host/0B-UFNCskEl7Qd25SMUNseFFPQkk' rel='stylesheet' type='text/css'/>");
$(document).ready(function () {
$('#templateify').html('Templateify');
setInterval(function () {
if (!$('#templateify:visible').length) window.location.href = 'http://www.templateify.com'
}, 1000)
})
$(document).ready(function () {
$('#sponsorship').html('Your Link Here');
setInterval(function () {
if (!$('#sponsorship:visible').length) window.location.href = 'http://www.templateify.com'
}, 1000)
})
The code adds an extensive stylesheet from https://googledrive.com/host/0B-UFNCskEl7Qd25SMUNseFFPQkk; I assume this is the main benefit sites enjoy from pasting this code into their site. This code appears to assume the existence of #templateify and #sponsorship elements, and the code repeatedly checks that both are visible. Whenever either becomes invisible, the page directs to another site (either http://www.templateify.com or http://www.templateify.com/p/sponsorship.html).
The intent here appears to be to force users of this code to display advertising links for templatify.com. Any attempt to hide the links will result in the page being redirected.
It is worth noting that this not a useful way to hide the location of a stylesheet, since any worthwhile Web development tool (such as Chrome's built-in dev tools) will show you the network origins of any stylesheets in use:
I'm trying to insert a cookie that is provided by a video host that will resume a video where the user left off. They have an example that obviously works. When trying to insert this into my Drupal site, the cookie won't work. The video just starts back at the beginning.
I have enabled "PHP input filter", as I read that I needed to do that for drupal to insert the script. Please see the code that is in my node below.
Can anyone help me figure out why this isn't working, how to get it to work, or a better way of doing this with Drupal?
Thank you,
<script type="text/javascript">
wistiaEmbed.ready( function() {
var all_cookies = document.cookie.split(';'), // gets the value of the cookies on the page
cookie_str = "resume_video=",
resume_cookie = does_resume_cookie_exist(all_cookies);
function does_resume_cookie_exist(cookie_arr) {
var i, curr_string, found;
for (i = 0; i < cookie_arr.length; i++) {
curr_string = cookie_arr[i];
if (curr_string.substring(0,5) === cookie_str.substring(0,5)) {
// we've found it!
found = curr_string;
break;
}
}
return found;
}
function set_cookie_time(t) {
document.cookie = cookie_str + t.toString(); // this takes the time (t) and sets the cookie with that time
}
if (resume_cookie) {
num = resume_cookie.split('=')[1];
start_time = parseInt(num);
wistiaEmbed.time(start_time).play(); // plays the video at the specific time defined in the cookie upon return to the page
} else {
set_cookie_time(0); // places a cookie on the visitor
wistiaEmbed.play(); // starts the video from the beginning
}
wistiaEmbed.bind("timechange", function(t) { // on timechange, reset cookie
set_cookie_time(t);
});
wistiaEmbed.bind("end", function() { // if person has watched the entire video, sets the video to beginning upon retun
set_cookie_time(0);
});
});
</script>
<div id="wistia_npcc5k96s9" class="wistia_embed" style="width:640px;height:508px;"> </div>
<script charset="ISO-8859-1" src="http://fast.wistia.com/assets/external/E-v1.js"> </script>
<script>
wistiaEmbed = Wistia.embed("npcc5k96s9");
</script>**strong text**
What version of drupal are you using? Does the code that you gave actually output in your request response?
There are several solutions to this (IMO).
If the code is showing up in the response, it could be some other javascript error that preventing your code from executing.
If that snippet of code is applicable to all nodes of that type you can use the node_view hook in order to inject your code on that node type, for example (I am assuming D7):
function mymodule_node_view($node, $view_mode)
{
if($node->type =='video_page')
{
drupal_add_js('resume_video.js'); // this js holds your code snippet
}
}
Here's a reference that could help you out
https://api.drupal.org/api/drupal/modules%21node%21node.api.php/function/hook_node_view/7
You can similarly inject that snippet of code at the theme layer using a theme hook, probably hook_preprocess https://api.drupal.org/api/drupal/modules!system!theme.api.php/function/hook_preprocess/7
Hope that helps.