show <div> content based on size of device screen [duplicate] - javascript

This question already has answers here:
Common CSS Media Queries Break Points [duplicate]
(13 answers)
How to show HTML elements at specific window widths?
(2 answers)
Closed 21 days ago.
I paid a few times to get code on fivrr but seems no one understood what I wanted.
Here is what I want. I want to show one large widget if the screen is a deskstop montior. I want to show one medium size widget if the screen is a tablet. I want to show one smaller sized widget if the screen is a deskstop montior. does not matter to me if it is done with CSS or Javascript. Here is the code.
<body>
<div class="container">
<!--- DISPLAY THIS CODE FOR DESKTOP MONITOR ONLY-->
<div class="desktopIframe">
<iframe width="600" height="336" frameborder="0" src="https://live365.com/embed/player.html?station=a89734&s=lg&m=dark"></iframe>
</div>
<!--- DISPLAY THIS CODE FOR TABLET ONLY-->
<div class="tabletIframe">
<iframe width="450" height="316" frameborder="0"
src="https://live365.com/embed/player.html?station=a89734&s=md&m=dark"></iframe>
</div>
<!--- DISPLAY THIS CODE FOR PHONE ONLY -->
<div class="phoneIframe">
<iframe width="300" height="536" frameborder="0"
src="https://live365.com/embed/player.html?station=a89734&s=sm&m=dark"></iframe>
</div>
<!-- End Container -->
</div>
I hope someone can help me. Spent hours try to sort uot how to use #meda only screen with no luck.
Thank you! Jim

Related

Accessing Javascript created span element that doesn't appear in HTML source code [duplicate]

This question already has answers here:
How can I access the contents of an iframe with JavaScript/jQuery?
(15 answers)
Closed 5 years ago.
I'm trying to access a series of span tags that begin with a certain string MTG_INSTR, but these span tags don't appear in the static HTML file that the website has when I view it on (rightclick -> view page source), but it does appear when I view it under (rightclick -> inspect -> elements), this is in chrome. I looked at the static HTML code and it has
<div id="ptifrmtarget"><iframe id="ptifrmtgtframe" name="TargetContent"
title="Main Content" frameborder="0" scrolling="auto" onload="ptrc.onLoadTC()"
src="URL EX" style="width: 1440px; height: 336px;"></iframe> </div>
then when I view the page by inspect -> elements they insert a #document tag in between these two last tags in the original static HTML
</iframe>
#document
<!DOCTYPE html>
<html class="pc chrome mac psc_dir-ltr psc_form-xlarge" dir="ltr"
lang="en">
.....................................................................
.....................................................................
.....................................................................
href="javascript:DoBack('win0')" style="visibility:hidden" aria-
hidden="true">
</a></div></body></html>
</div>
I deleted a lot of the code as it included many tables/table entries, eventually leading down to the desired span element that includes a teacher's name that I want to extract. There are a number of these teacher span tags that I want to grab and they follow this format
<div id="win0divMTG_INSTR$0"><span class="PSLONGEDITBOX"
id="MTG_INSTR$0">EXAMPLE NAME</span>
</div>
I was told I could use jQuery since it works with current DOM objects but it doesn't currently work with this line
$("span[id^=MTG_INSTR]").text('text');
You need to target the content of your <iframe>. Try:
$('#ptifrmtgtframe').contents().find("span[id^=MTG_INSTR]").text('text');

Can't target ID of an element in a loop using jQuery [duplicate]

This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 8 years ago.
I'm stumped and need some help. I am trying to implement some responsive code, upon implementation, I had to re-jigger some code to make it work. One being getting the ID from a table element.
The HTML I have so far:
<div class="title">blah</div>
<table id="Sailing%20Monohull" class="responsive">
<!-- contents -->
</table>
When you go responsive, the HTML changes, like so:
<div class="title">blah</div>
<div class="table-wrapper">
<div class="scrollable">
<table id="Sailing%20Monohull" class="responsive">
<!-- contents -->
</table>
</div>
<div class="pinned">
<table id="Sailing%20Monohull" class="responsive">
<!-- contents -->
</table>
</div>
</div>
This is repeated 3 times. When responsive, I want to get the table ID, example "Sailing%20Monohull"
I have tried in Chrome's console:
$(".title").each(function(index, element) {
console.log($(this).next().find('.scrollable').children().attr('id'));
});
and I got the desired results. but when I put it in my file, upload it and run it, I get undefined and I don't know why. I am open to any ideas. Thanks in advance
Your table id is not a valid identifier. Do not use special characters, except for _. Use number or characters.
Try this
$(".title").each(function(index, element) {
console.log($(this).next("div").find('.scrollable').find("table").attr("id"));
});
JS Fiddle

How to replace HTML with another chunk of HTML Using JS [duplicate]

This question already has answers here:
How to update/change HTML content with JavaScript and prevent the page from refreshing?
(4 answers)
Closed 8 years ago.
so I'm attempting to make a page where I click on a button and the HTML code of the div next to it changes. Essentially, I want to be able to click a link and my code inside the div changes.
Here are the two different HTML codes:
Number One: (id = contentPOP)
<div id="contentPOP">
<h3>Hit like a girl entry, "Little Black Dress" by One Direction</h3>
<iframe width="500" height="300"
src="https://www.youtube.com/embed/QW6naMc6TWk?list=UUHe-Lb7DWhwT5S7Vzn7abxA"
frameborder="0" allowfullscreen> </iframe>
<br>
<h3>Remembering Steve Jobs</h3>
<iframe width="500" height="300"
src="https://www.youtube.com/embed/q7oyy0FjhAY?list=UUHe-Lb7DWhwT5S7Vzn7abxA"
frameborder="0" allowfullscreen></iframe>
</div>
Number Two (id = "contentNEW")
<div id="contentNEW">
<h3>Slow Motion War!</h3>
<iframe width="500" height="300"
src="https://www.youtube.com/embed/Y2996S-8oEU?list=UUHe-Lb7DWhwT5S7Vzn7abxA"
frameborder="0" allowfullscreen></iframe>
<br>
<h3>1 Year Aniversary of Teddy Bear Productions!</h3>
<iframe width="500" height="300"
src="https://www.youtube.com/embed/7Tim_K74ua8?list=UUHe-Lb7DWhwT5S7Vzn7abxA"
frameborder="0" allowfullscreen></iframe>
</div>
Here is an example of all the code
NOTE: I have no idea how to do this, so a detailed explanation would be very helpful. Also, I want to be able to do this with only JS, no JQuery
First, uncomment the following so it exists on the page:
<!--THE BELOW CODE SHOULD REPLACE THE ABOVE CODE
<div id="contentNEW">
...
</div>
-->
And instead hide it with CSS:
#contentNEW { display: none; }
Then add the following to your newVids() function:
function newVids() {
// target the div you want to change
var div = document.getElementById('contentPOP');
// replace its innerHTML with the innerHTML of the hidden div
div.innerHTML = document.getElementById('contentNEW').innerHTML;
}
This is really a poor way to go about what you're trying to do. You shouldn't think about toggling the visibility of each div, instead of replacing one with the other.
Listen, this is done very easily. Wrap both chunks of code inside of their own divs and give them unique IDs so that you can target them in the jquery. The inittialy hidden one, will have a display:hidden class attached to it and then you can use toggle to switch . Easy!
HERE IS AN EXAMPLE!!!
Good luck!
HTML
<p>This is a paragraph.</p>
<p class="hidden">This is a second paragraph.</p>
<button>Toggle </button>
CSS
.hidden{
display:none;
}
JS
$(document).ready(function(){
$("button").click(function(){
$("p").toggle();
});
});

Trouble with an onClick event

I'm building a gallery and osm of the items will have multiple views - similar to items found in an etsy gallery - and I'm trying to figure out whats going wrong. I started this a while ago and it worked but as I'm not a coder (exclusively) and just teaching myself, I can't tell what has changed or what I'm missing.
The goal is to have a large image and three thumbnails. When one of the three thumbnails is selected it will replace the large image with the corresponding image.
The code:
Here is what I have as my js function I am linking in:
<script type="text/javascript">
function altViews(next_img) {
document.getElementById("big").src = next_img;
}
</script>
*(Note, it is giving me an error on line 4 : document.getElementById("big").src = next_img;)*
Here is the code I used for the image and the thumbnails:
<div class="artwork">
<img id="big" src="../images/_101111-1.png"/>
<div class="gallery-thumbnails">
<img class="gallery-thumb" src="images/_101111-1.jpg" onclick="altViews('../images/_101111-1.jpg')">
<img class="gallery-thumb" src="images/_101111-3.jpg" onclick="altViews('../images/_101111-3.jpg')">
<img class="gallery-thumb" src="images/_101111-4.jpg" onclick="altViews('../images/_101111-4.png')">
</div>
<div class="rule">
</div>
</div>
If there are any details I've left out, please let me know. Also, I am a novice with js and php and teaching myself in my spare time so this might be a simple solution but I'm not familiar enough with it yet to figure it out.
You forgot to close the <img> tag adding a backslash to the end />
<img class="gallery-thumb" src="images/_101111-1.jpg" onclick="altViews('../images/_101111-1.jpg')"/>

innerHTML does not work with Javascript output contents

I try to make some kind of ads rotator as follows:
<html>
<head>
<title></title>
<style>
body {
margin:0;
padding:0;
}
</style>
<script>
function fillBoard() {
s = document.getElementsByClassName('slots');
board = document.getElementById('board');
board.innerHTML = s[0].innerHTML
alert(board.innerHTML);
}
</script>
</head>
<body>
<div id="board" style="width:160px; text-align: center; margin:0">
</div>
<div class="slots" style="display:none">
<!-- THE PROBLEM IS HERE -->
<!-- Begin Hsoub Ads Ad Place code -->
<script type="text/javascript">
<!--
hsoub_adplace = 1310003403401506;
hsoub_adplace_size = '125x125';
//-->
</script>
<script src="http://ads2.hsoub.com/show.js" type="text/javascript"></script>
<!-- End Hsoub Ads Ad Place code -->
</div>
<div class="slots" style="display:none">
<img src="http://lorempixel.com/160/90/sports/1/" />
</div>
<div class="slots" style="display:none">
<img src="http://lorempixel.com/160/90/sports/2/" />
</div>
<div class="slots" style="display:none">
<img src="http://lorempixel.com/160/90/sports/3/" />
</div>
<script>
fillBoard();
</script>
</body>
</html>
In the code above:
There is a div with id board to act as a board that displays contents.
The board should be filled with data supplied from other hidden divs with class name slots using innerHTML property.
To do the above a function named fillBoard() is defined in the head section of the page and then called at the end of it just before closing </body> tag.
What is happening?
The hidden divs slots works fine with divs that contain images. However, in the first div there are a javascript code that should generates ads from an ads network which it does not work.
I expect that the javascript code of the ads network should fill its div with data, then the calling of fillBoard() will just copy its content to the board div. However, this is does not occur!
I need to know how could I overcome this issue?
A live example is found here
You can just show the desired hidden div and it's usually a better practice than copying DOM content. If you make sure to only show one of the hidden divs at a time you can show the image always in the same place.
Try this to show the first "slots" element:
s[0].style.display = 'block';
Ok so after some more digging I've found the issue, although I don't have an easy solution at the moment.
The js file show.js is generating some ad content inside of an iframe for you, which you are placing in the first 'slots' div. Simple enough. When you are setting the content of the board to the content of the first slots class, an iframe is being created in the board div but without the same content.
After some searching it seems that innerHTML of an iframe will not copy the contents of the iframe if it comes from a domain other than the page domain for security reasons.
It seems to me that the solution at this point is to either show and hide the slots divs like Zhertal suggested or you can possible find some other way to physically move the content of the slots div into board, but this may still be a violation of the same security concern. I'm going to keep digging and I'll edit this answer if I find anything more.
Reference SO posts:
Get IFrame innerHTML using JavaScript
Javascript Iframe innerHTML

Categories

Resources