If referrer (multiple&exact) than div else div two - javascript

I've got this code working for one referrer (twitter) but how do I amend so if there was from twitter and facebook and further how do I amend to be exact root domain eg from only checking t.co to t.co/s9NHw3
<script>
console.log(document.referrer);
console.log(document.referrer.split('/')[2]);
if (document.referrer.split('/')[2] === 't.co') {
document.getElementById('imagebanner').style.display = 'block';
document.getElementById('others').style.display = 'none';
} else {
document.getElementById('imagebanner').style.display = 'none';
document.getElementById('others').style.display = 'block';
}
</script>
Example of what I have tried:
<script>
console.log(document.referrer);
console.log(document.referrer.split('/')[2]);
if (document.referrer.split('/')[2] === 't.co/s9NHw3','facebook.com') {
document.getElementById('imagebanner').style.display = 'block';
document.getElementById('others').style.display = 'none';
} else {
document.getElementById('imagebanner').style.display = 'none';
document.getElementById('others').style.display = 'block';
}
</script>
Edited question. Please see issue below in comments. I am now looking want to look at tag only in url (not even root url) and then show either div one if it has tag in url (example bing.com/eu9jdi9 or google.com/eu9jdi9 - where eu9jdi9 is the tag - would like to use multiple tags so will try || again) or div two if it hasn't.

Related

Show/Hide button if iframe "src" contains certain text

I am trying to display a button if the src attribute of an iframe on the same page contains a certain text.
See jsFiddle for example.
I am basically trying to only show the "download MP3" button if the iframe has a valid soundcloud url as src attribute.
The one thing all valid soundcloud iframes have in common is: all src urls start with
//w.soundcloud.com/player/?url=https%3A%2F%2Fsoundcloud.com%2F
You can get the dom element, and check it's src attribute.
Something like that:
const src = document.getElementById('ifrm').src;
if (src.indexOf('some')) {
console.log('YAY');
} else {
console.log('Not Yay')
}
<iframe src="https://some-site.com" id="ifrm" />
consider the following code snippet:
var btn = document.getElementById("buttonId");//get the button
var src = document.getElementById("iframeId").src; // get the src
var url = "//w.soundcloud.com/player/?url=https%3A%2F%2Fsoundcloud.com%2F"
if(src.indexOf(url) !=-1){ //this will return -1 if false
btn.style.display = "inline-block";//show the button
}else{
btn.style.display = "none";//hide the button
}
or you can use regular expression test function :
var btn = document.getElementById("buttonId");//get the button
var src = document.getElementById("iframeId").src; // get the src
var patt = //"/w.soundcloud.com/player/?url=https%3A%2F%2Fsoundcloud.com%2F"/;
if(patt.test(src)){ // will return true if found
btn.style.display = "inline-block";//show the button
}else{
btn.style.display = "none";//hide the button
}
hope it helps

Modifying nonexistant DOM elements in WKWebView

I'm displaying a webpage in a WKWebView. To hide elements like the header or sidebars, I'm applying JavaScript. The problem is I'm using one script for various pages of the same site, and page elements different for different types of pages. If I do something like this:
let scriptURL = NSBundle.mainBundle().pathForResource("myscript", ofType: "js")
let scriptContent = String(contentsOfFile:scriptURL!, encoding:NSUTF8StringEncoding, error: nil)
let script = WKUserScript(source: scriptContent!, injectionTime: .AtDocumentEnd, forMainFrameOnly: true)
config.userContentController.addUserScript(script)
…
document.getElementById("header").style.display = "none";
for a nonexistent element, it errors out and the rest of the JavaScript doesn't get applied.
You'll have to check to see whether or not the element is valid before proceeding. Instead of putting if statements everywhere, you can just define a function as so:
var setElementDisplayStyle = function(id, style) {
var element = document.getElementById(id);
if(element) element.style.display = style;
}
Usage:
setElementDisplayStyle("header", "none");
Did you want to something like this
var header = document.getElementById("header")
if (header) {
header.style.display = "none";
}

How to Expand / Collapse a section of a Web Site and also change the image using JavaScript

EDIT #1
Thanks to the 2 users who responded, their solutions worked great! Something I forgot to mention in the original post was, Is there any way to adjust the user's view so that when the expanded section is collapses by the user, their "view" (or the actual web page) can adjust up to an anchored spot?
ORIGINAL POST
I've got a section of a website that I want to first be collapsed and not able to be viewed by the user. Then, when they hit an arrow on the screen, the hidden content will then display AND the image needs to change from a "down" arrow to an "up" arrow.
I'm able to do this with the below code right now but I have to have two arrows. Can anyone help so that I only have one arrow on screen and it changes based on when the user clicks on it? I'd also like this to be able to be done an infinite amount of times by the user (ie if the user clicks the "down" arrow, the section expands and the arrow changes to an "up" arrow but then when the user hits that "up" arrow the section collapses and the arrow changes back to a "down" arrow. Possible?
<script language="JavaScript" type="text/javascript">
<!--
function sizeTbl(h) {
var tbl = document.getElementById('tbl');
tbl.style.display = h;
}
// -->
</script>
<br>
<img src="up_arrow.png">
<img src="down_arrow.png">
Thanks for any help!
I have added your code and created a jsfiddle for you...
changed code:-
function sizeTbl(h) {
var tbl = document.getElementById('container');
tbl.style.display = h;
if (h == "block") {
document.getElementById('down').style.display = 'none';
document.getElementById('up').style.display = 'block';
} else {
document.getElementById('up').style.display = 'none';
document.getElementById('down').style.display = 'block';
}
}
working example:-
click to see example:-http://jsfiddle.net/XUjAH/1089/
thanks
I've taken out the parameter from your sizeTbl method
Then I'm getting the src property of the image (note I've given it an ID). Depending on the src we can show/hide the table and change the image property
Here's a jsFiddle
<script language="JavaScript" type="text/javascript">
<!--
function sizeTbl() {
var tbl = document.getElementById('tbl');
var icon = document.getElementById('toggle-table');
if (icon.src === 'down_arrow.png'){
tbl.style.display = 'block';
icon.src = 'up_arrow.png';
}
else {
tbl.style.display = 'none';
icon.src = 'down_arrow.png';
}
}
// -->
</script>
<br>
<img src="down_arrow.png" id="toggle-table">
You've added some extra requirements to your question. You've tagged jQuery and this is the easiest solution for this scenario.
Remove the javascript:sizeTbl() from your <anchor> tag. This is known as inline JS and isn't recommended because it means you are mixing your presentation code with your business logic.
You make the <anchor> tag act like a normal anchor tag and attach a click event in the document's ready event.
function sizeTbl() {
var tbl = document.getElementById('tbl');
var icon = document.getElementById('toggle-table');
if (icon.innerText === 'show') {
tbl.style.display = 'block';
icon.innerText = 'hide';
} else {
tbl.style.display = 'none';
icon.innerText = 'show';
}
}
$(document).ready(function(){
$('#sizeTbl').on('click', sizeTbl);
});
I've created a new jsFiddle that demonstrates this.
Notes:
You need to be using jQuery for this to work
Note that I've given the <anchor> tag an ID. This is so that I can locate it in code
If you have any other comments, the etiquette on SO is to ask new questions. The answers get too long and complicated otherwise

Unable to show Div based on If statement

Can anyone please help me to resolve this Javascript issue:
I need to show few div component based on the current website's hostname and need to do this only during the initial load of the Page. I've developed a Javascript code for this but unable to show/hide div components in the desired manner.
The following Javascript code always gives an "Uncaught SyntaxError: Unexpected token else" Error on the console.
<html>
<head>
<script>
var hostName = window.location.host;
var div1 = document.getElementById('iframePortal');
var div2 = document.getElementById('iframeNormal');
If(String(hostName).indexOf('w3schools') !== -1)
{
document.getElementById('iframePortal').style.display = 'block';
document.getElementById('iframeNormal').style.display = 'none';
}
else {
document.getElementById('iframePortal').style.display = 'none';
document.getElementById('iframeNormal').style.display = 'block';
}
</script>
</head>
<body>
<div id="iframeNormal">
some text 1
</div>
<div id="iframePortal">
another 1
</div>
</body>
</html>
use if instead of If like this
if(hostName.indexOf('w3schools') !== -1)
First thing is js is case sensitive as they told you. 2nd thing is you are trying to access the elements before they are fully loaded. Modify your code to:
<html>
<head>
</head>
<body>
<div id="iframeNormal">
some text 1
</div>
<div id="iframePortal">
another 1
</div>
<script>
var hostName = window.location.host;
var div1 = document.getElementById('iframePortal');
var div2 = document.getElementById('iframeNormal');
if(String(hostName).indexOf('w3schools') !== -1)
{
document.getElementById('iframePortal').style.display = 'block';
document.getElementById('iframeNormal').style.display = 'none';
}
else {
document.getElementById('iframePortal').style.display = 'none';
document.getElementById('iframeNormal').style.display = 'block';
}
</script>
</body>
</html>
You have "I" letter in uppercase -> replace it with "i"... so, should be 'if'.
I would use window.location.hostname instead of window.location.host,
also typeof(window.location.hostname) return 'string' so you don't need to wrap hostname in if statement with String
<script>
var div1 = document.getElementById('iframePortal');
var div2 = document.getElementById('iframeNormal');
if(window.location.hostname.indexOf('w3schools') >= 0){
div1.style.display = 'block';
div2.style.display = 'none';
}else{
div1.style.display = 'none';
div2.style.display = 'block';
}
</script>
Here is a working jsFiddle: http://jsfiddle.net/rsFPF/
I had to use some css too. Please give it a try.
Don't use jsFiddle? Below is the code:
Html:
<div id='iframeNormal' class='iframes'> some text 1 </div>
<div id='iframePortal' class='iframes'> another 1 </div>
CSS:
.iframes
{
display: none;
}
javascript:
var div1 = document.getElementById('iframeNormal');
var div2 = document.getElementById('iframePortal');
if (window.location.host.indexOf('w3schools') !== -1)
{
div1.style.display = 'block';
}
else
{
div2.style.display = 'block';
}

Hidden div flashing on page load

In my Rails app, I'm trying to hide a div (box) on page load in the Javascript function below. This function loops through a series of checkboxes with the same name (cb). If any of the checkboxes are checked, it should show the div.
function BoxCheck(cb,box){
var cbs=document.getElementsByName(cb);
var d=document.getElementById(box);
d.style.display = 'none';
var flag_check=0
for (var zxc0=0;zxc0<cbs.length;zxc0++){
if (cbs[zxc0].checked){
flag_check=flag_check+1
} else
{ }
}
if (flag_check > 0){
d.style.display = 'block';
document.getElementById('multi_control_spacer').style.display = 'block';
} else {
d.style.display = 'none';
document.getElementById('multi_control_spacer').style.display = 'none';
}
}
The function fires on load with:
<body onload="javascript:BoxCheck('doc_ids[]','multi_control');">
The problem is that when no checkboxes are selected, the div flashes on momentarily, and then disappears.
Here's the CSS:
#multi_control {
padding: 10px;
background: #333;
}
I tried setting the css to display:none, but then I can't seem to make it switch to back to display:block with Javascript.
Why not? Have you tried:
element.style.display = 'block';
How about putting style="display:none" into the div tag so it's hidden to begin with?

Categories