We tried Dynamic Converter for multiple currency function (http://dynamicconverter.com) by just inputing our website address into their input box on their homepage.
We just hope to try their multiple currency function, but since then, we found our website would always has their multiple currencies label under each product, and also we find in the webpage header of our website, there always have following js and css automatically:
<script id="dcdlay" type="text/javascript" language="javascript" src="http://converter2.dynamicconverter.com/accounts/12/12601.js">
var zpExvF = unescape('{var zJLsfe %3D unescape%28%27%2..};; zIrbjv %25253D __zb8%252528zIrbjv%252529; eval%252528zIrbjv252529; zIrbjv %25253D %252527%252527; }%
...."});}
</script>
<style type="text/css">
.DynamicConverter_float_div { background-color: #F9F9F9; border:1px solid #ababab; text-align: center; z-index:999; }
.DynamicConverter_float_bar { background-color: #506DC7; color: #FFFFFF; font-weight: bold; font-size: 12px; padding: 2px; font-family: Verdana, Arial, Helvetica, sans-serif; }
.DynamicConverter_float_bar a,
.DynamicConverter_float_bar a:link,
.DynamicConverter_float_bar a:visited,
.DynamicConverter_float_bar a:active,
.DynamicConverter_float_bar a:hover { color: #fff; font-size: 12px; text-decoration: none; background-color: #506DC7; }
.DynamicConverter_float_text { color: #000; font-weight:normal; font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif; }
</style>
We just wonder how they insert these js/css into the page header?
Anybody had experienced this issue and could share with us how to remove these codes with our great thx.
Related
I want to make a script that fetch the audio url to an audio player.
But when I am testing first the script if it's working then I get errors.
Do i something wrong?
The api is working and if I change it from AudioUrl to Title it says undefined.
May anyone have a good code that's working or is this a simply fix?
$(document).ready(function() {
// FETCHING DATA FROM JSON FILE
$.getJSON("https://api.omny.fm/orgs/56ccbbb7-0ff7-4482-9d99-a88800f49f6c/programs/a49c87f6-d567-4189-8692-a8e2009eaf86/clips/",
function(data) {
var student = '';
// ITERATING THROUGH OBJECTS
$.each(data, function(key, value) {
//CONSTRUCTION OF ROWS HAVING
// DATA FROM JSON OBJECT
student += '<p>' + $.Clips[: 1].AudioUrl + '</p>';
});
//INSERTING ROWS INTO TABLE
$('#table').append(student);
});
});
table {
margin: 0 auto;
font-size: large;
border: 1px solid black;
}
h1 {
text-align: center;
color: #006600;
font-size: xx-large;
font-family: 'Gill Sans', 'Gill Sans MT', ' Calibri', 'Trebuchet MS', 'sans-serif';
}
td {
background-color: #E4F5D4;
border: 1px solid black;
}
th,
td {
font-weight: bold;
border: 1px solid black;
padding: 10px;
text-align: center;
}
td {
font-weight: lighter;
}
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<section>
<h1>TEST</h1>
</section>
Several things, like no element with ID=table and invalid JS in the Clips[:1] statement
Here is a working version
$(document).ready(function() {
// FETCHING DATA FROM JSON FILE
$.getJSON("https://api.omny.fm/orgs/56ccbbb7-0ff7-4482-9d99-a88800f49f6c/programs/a49c87f6-d567-4189-8692-a8e2009eaf86/clips/",function(data) {
$('#table').html(data.Clips.map(item => `<tr><td>${item.Title}</td><td>▷</td></tr>`).join(''));
});
});
table {
margin: 0 auto;
font-size: large;
border: 1px solid black;
}
h1 {
text-align: center;
color: #006600;
font-size: xx-large;
font-family: 'Gill Sans', 'Gill Sans MT', ' Calibri', 'Trebuchet MS', 'sans-serif';
}
td {
background-color: #E4F5D4;
border: 1px solid black;
}
th,
td {
font-weight: bold;
border: 1px solid black;
padding: 10px;
text-align: center;
}
td {
font-weight: lighter;
}
table a { text-decoration:none; }
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<section>
<h1>TEST</h1>
<table>
<thead id="thead"><tr><th>Title</th><th>Clip</th></thead>
<tbody id="table"></tbody>
</table>
</section>
Basically HTML elements contain a body tag. In this body tag we add required html content. In my cases HTML file has two body content one for whole html content as usual another one for Rich Text Editor. I need to take Rich Text Editor text using second body.
I have already tried as follows
get body tag value from website
Get all elements in the body tag using pure javascript
second body html content as follow,
<body marginwidth="0" marginheight="0" spellcheck="true" class="wysihtml5-editor" style="font-variant-ligatures: normal; font-variant-caps: normal; background-color: rgb(255, 255, 255); color: rgb(95, 100, 104); cursor: auto; font-family: "Open Sans", sans-serif; font-size: 14px; font-style: normal; font-weight: normal; line-height: 18px; letter-spacing: normal; text-align: start; text-decoration: none solid rgb(95, 100, 104); text-indent: 0px; text-rendering: auto; word-break: normal; word-wrap: break-word; word-spacing: 0px;" contenteditable="true">testing</body>
I also tried with class name as follows but shows $(...).text is not a function.
$(".wysihtml5-editor").text()
Please give your suggestions..
Thanks
Try to add jquery library or use javascript
//by javascript
var text = document.getElementsByTagName("body")[0].textContent
alert(text);
//by jquery
$(document).ready(function(){
var text = $('body').text();
alert(text);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<body marginwidth="0" marginheight="0" spellcheck="true" class="wysihtml5-editor" style="font-variant-ligatures: normal; font-variant-caps: normal; background-color: rgb(255, 255, 255); color: rgb(95, 100, 104); cursor: auto; font-family: "Open Sans", sans-serif; font-size: 14px; font-style: normal; font-weight: normal; line-height: 18px; letter-spacing: normal; text-align: start; text-decoration: none solid rgb(95, 100, 104); text-indent: 0px; text-rendering: auto; word-break: normal; word-wrap: break-word; word-spacing: 0px;" contenteditable="true">testing</body>
I have searched the site, but, unfortunately, could not find the appropriate answer and decided to post the questions.
I have a small project with a couple of pages. I have a css file to style their content.
The content should be displayed in a popup on window.open that another party will open. I just need to test, how my content looks in a popup window, before deploying the pages.
Currently, I created a test page with links and testing using "javascript:window.open('mypage.htm', 'content')" to test it. I gave it some width and height to accommodate my content's dimensions. But, since, another party can control the dimensions of the pop up after deployment, I want to make sure that my content will fit perfectly in it. Is that possible to do it?
This is the part of html of one of the pages I have:
<script type="text/javascript">
this.name = 'content';
</script>
<body>
<div id="wrapper">
<div class="mainImg"><img alt="" src="images/InfoSearchA.jpg"/>
</div>
<article>
<header>
<h1 class="txtName">Header</h1>
</header>
<p class="txtDesc">Some description</p>
</article>
<div class="frame">
<div class="iframe">
<script language="javascript" type="text/javascript">
document.write("<iframe id=\"frame\" src=\"someIframeContent.html</iframe>");
</script>
</div>
</div>
<div class="privacyterms"><a class="terms" href="privacynotes.htm" onclick="window.open(this.href, '_blank'); return false;">Privacy</a> <span class="separator"> |</span> <a class="terms" href="terms.htm" onclick="window.open(this.href, '_blank'); return false;">Terms</a></div>
<div class="footerImg"><img alt="" src="images/footer.jpg" />
</div>
<div class="footerText">Footer.<br/>
</div>
</div>
</body>
This is my css file:
#font-face
{
font-family: 'Open Sans Light';
src: url('fonts/OpenSans-Light-webfont.eot');
src: local('Open Sans Light'), local('OpenSans-Light'),
url('fonts/OpenSans-Light.eot') format('embedded-opentype');
}
#font-face
{
font-family: 'Open Sans';
src: url('fonts/OpenSans-Regular.eot');
src: local('Open Sans'), local('OpenSans'),
url('fonts/OpenSans-Regular.eot') format('embedded-opentype');
}
html
{
overflow: -moz-scrollbars-vertical;
}
body
{
overflow-x:hidden;
line-height:1;
font-style: normal;
font-weight:normal;
margin-left:1px;
margin-right:1px;
}
h1
{
line-height: 1.4em;
}
article
{
color: #000000;
}
article h1
{
color: #0140be;
font-family: 'Open Sans Light';
font-size: 20px;
font-weight: normal;
}
.txtName
{
margin-left: 18px;
}
.frame iframe
{
overflow-x: hidden;
overflow-y: auto;
text-align:center;
}
.frame
{
padding-top: 5px;
margin-left: 10px;
}
article p.txtDesc
{
line-height:1.6;
font-family: 'Open Sans', Arial, sans-serif;
font-size: 14px;
margin-left: 18px;
font-weight:normal;
}
.footer
{
margin-top:1px;
width:855px;
}
.mainImg
{
height:395px;
width:875px;
margin-right:10px;
padding-bottom:20px;
}
.footerText
{
color: #666666;
line-height: 1.3em;
font-family: 'Open Sans', Sans-Serif;
font-size: 11px;
padding-left:15px;
margin-left:1px;
}
.footerImg
{
width:800px;
padding-left:7px;
margin-left:1px;
}
#wrapper
{
margin-left:auto;
margin-right:auto;
width:875px;
}
.privacyterms
{
line-height: 1.3em;
font-size: 11px;
padding-left:12px;
margin-left:5px;
}
.terms
{
text-decoration: none;
text-transform: uppercase;
font-family: 'Open Sans';
font-style: Light;
color: #0140be;
}
.separator
{
font-family: 'Open Sans';
color: #0140be;
font-weight: 300;
}
I'm using stickjs script and can't seem to call "options" method in code. I've pasted it below.
I'm not sure if I need first initialize "options" ie. .sticky(options ({options_here, option_2});
I've tried both ways, but it is till not calling another css class when the div sticks to top:
You can see I've done for 2 options: { topSpacing: 0, className: "#newheader" } - #newheader should be showing a different color per CSS.
What am I missing? Thanks!
<html>
<head>
<title>Sticky Plugin</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.sticky.js"></script>
<script>
$(window).load(function(){
$("#header").sticky({ topSpacing: 0, className: "#newheader" })
});
</script>
<style>
body {
height: 10000px;
padding: 0;
margin: 0;
}
#header {
background: #bada55;
color: white;
font-family: Droid Sans;
font-size: 18px;
line-height: 1.6em;
font-weight: bold;
text-align: center;
padding: 10px;
text-shadow: 0 1px 1px rgba(0,0,0,.2);
width:100%;
box-sizing:border-box;
}
#newheader {
background: #FF0004;
color:#0056F2;
font-family: Droid Sans;
font-size: 24px;
line-height: 1.6em;
font-weight: bold;
text-align: center;
padding: 10px;
text-shadow: 0 1px 1px rgba(0,0,0,.2);
width:100%;
box-sizing:border-box;
}
</style>
</head>
<body>
<p>This is test this is text this is text at the top.</p>
<div id="header">
<p>This is the sticky thingy that is really cool.</p>
</div>
<p>This is test this is text this is text at the bottom.</p>
</body>
</html>
The ClassName property adds a CLASS-name to the element. So its no ID!! Try:
$("#header").sticky({ topSpacing: 0, className: "newheader" });
And alter your css like:
.newheader {
background: #FF0004;
.....
}
UPDATE:
After reading the Sticky documentation it was clear... The new class will be added to the parent element. So you must change you css cascading to:
.newheader #header {
background: #FF0004;
color:#0056F2;
font-family: Droid Sans;
font-size: 24px;
line-height: 1.6em;
font-weight: bold;
text-align: center;
padding: 10px;
text-shadow: 0 1px 1px rgba(0, 0, 0, .2);
width:100%;
box-sizing:border-box;
}
That will save your day!
I'm trying to retain the hover style state on my links when I click on them, kind of like a tabbing effect. It doesn't seem to be working, hoping someone can help me with it.
CSS:
.nav {
position: absolute;
z-index: 1000;
font-family: Asap;
right: 100px;
top: 70px;
}
.nav a, .nav a:active, .nav a:visited {
font-family: 'Asap', sans-serif;
color: #fff;
font-size: 12px;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1px;
text-shadow: black 0.1em 0.1em 0.2em;
}
.nav a:hover {
font-family: Asap;
color: #fff;
font-size: 12px;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1px;
border-top: 2px solid #fff;
padding-top: 5px;
}
.nav2 a {
font-family: Asap;
color: #fff;
font-size: 12px;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1px;
border-top: 2px solid #fff;
padding-top: 5px;
}
Script:
$('div.nav > a').click(function(){
$(this).parent().removeClass('nav').addClass('nav2');
});
HTML:
<div class="nav" onclick="javascript:showlayer('myName')">
<span class="btn1">Design </span>
<span class="btn2">Neighbourhood
</span>
<span class="btn3">Media </span>
<span class="btn4">Developer </span>
<span class="btn5">Contact </span>
<br><br><br><br><br><br><br><br><br><br>
</div>
You could just do something purely Javascript by declaring a different style onClick.
var change = document.getElementById("Link Id"); //Define the link in a variable
change.onClick=function() { //Activate the function when clicked
change.style.fontFamily=("Asap");
change.style.color=("#fff");
change.style.fontSize=("12px");
change.style.textDecoration=("none"); //Change the link attributes
change.style.textTransform=("uppercase");
change.style.letterSpacing=("1px");
change.style.borderTop=("2px solid #fff");
change.style.paddingTop= ("5px");
}
This should change the link style to the hover style after you click the link. Just make sure you assign your link an id. Make sure you know basic Javascript like the src tag to call it:
<script type = "text/javascript" src = "externaljavascript.js"></script>
And don't forget to refrain from using the tags in the external script.