I have a page where I am displaying a iframe from another page. I want that iframe to be display:none at load and become visible onClick. The issue is, I can get it to work if the div is visible at load. If it is hidden at load, the onclick doesnt work properly.
<script>
function myFunction() {
var x = document.getElementById("myDIV");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
<div style="margin-top:30px;">
<h2>Menu</h2>
<p>Dayton, Ohio Menu Coming Soon. It can be viewed currently at here</p>
<p><a onClick="myFunction()">Springfield, Ohio Menu</a></p>
<div>
<div id="myDIV" style="display: none">
<div id="leafly-menu">
</div>
<div style="text-align:center;">
</div>
<script src="https://www.leafly.com/public/global/js/dispensarymanager/embed.js"></script>
<script>var pymParent = pym.Parent('leafly-menu', 'https://www.leafly.com/embed/menu2/pure-ohio-wellness---springfield', {});</script>
</div>
<div style="overflow: hidden; margin: 15px auto; max-width: 975px;display: none;">
<iframe scrolling="no" src="https://www.leafly.com/dispensary-info/pure-ohio-wellness---springfield" style="border: 0px none; margin-left: -36px; height: 1012px; margin-top: -486px; width: 1050px;">
</iframe>
</div>
</div>
</div>
I think the functionality you're looking for here can be solved with the visibility:hidden tag, as I've had similar experienced with the "display:none" css property.
Definitely worth another google for differences between the two, but the w3schools snippet here seems to summarize things pretty well.
Hope this helps!
You can easily display the elements inside the Div using the click() function of jQuery. You need to include the jQuery CDN or jQuery file to run the jQuery scripts.
$(document).ready(function() {
$("#showMe").click(function () {
$("#myDIV").show();
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div style="margin-top:30px;">
<h2>Menu</h2>
<p>Dayton, Ohio Menu Coming Soon. It can be viewed currently at here</p>
<p><a id = "showMe" href="#">Springfield, Ohio Menu</a></p>
<div id="myDIV" style="display: none">
<div >
<div id="leafly-menu">
</div>
<div style="text-align:center;">
</div>
<script src="https://www.leafly.com/public/global/js/dispensarymanager/embed.js"></script>
<script>var pymParent = pym.Parent('leafly-menu', 'https://www.leafly.com/embed/menu2/pure-ohio-wellness---springfield', {});</script>
</div>
<div style="overflow: hidden; margin: 15px auto; max-width: 975px;">
<iframe scrolling="no" src="https://www.leafly.com/dispensary-info/pure-ohio-wellness---springfield" style="border: 0px none; margin-left: -36px; height: 1012px; margin-top: -486px; width: 1050px;">
</iframe>
</div>
</div>
</div>
I have updated the Fiddle with the two menus.
https://jsfiddle.net/9b15gw0f/
Related
I want to have a fullscreen popup over the whole page, but I've only found that you need to place it at the body root
<body>
<div id="popup" >
...
</div>
<div id="page">
<div id="content" >...</div>
</div>
</body>
But that's not what I need. I need to have a fullscreen popup adding it inside the page.
<body>
<div id="page">
<div id="popup" >
...
</div>
<div id="content" >
...
</div>
</div>
</body>
The problem is that if I do this, the popup is not fullscreen, but it appears only over the "page" div, while I want it to be fullscreen
I added a live example https://www.w3schools.com/code/tryit.asp?filename=GS0R8SGBW8CS as you can see the popup is not entirely full screen
Remove style="margin:2rem" from popup div
https://www.w3schools.com/code/tryit.asp?filename=GS0RIDZF6HMF
<style>
.Docdiv
{
position:relative;
z-index: 2;
width:1000px; overflow: hidden;
position: fixed;
top: 3%;bottom: 3%;
right:183px;
color: black;
}
</style>
<div class="Docdiv" style="min-height: 100%;">
</div>
The answer was that I had a parent div with the clip style attribute. I removed it and now the popup is fullscreen. Thanks everyone.
I need help with some JS. I need to add rel="lightbox" to the main images of the code below so that these images will open in a lightbox. I grabbed this code from the inspector and this is being generated by a plugin so instead of editing the plugin files I'd like to add the rel code another way. I assume I can add this via JS but nothing I am finding is working. Any help would be appreciated.
<div class="rsOverflow" style="width: 786px; height: 544px;">
<div class="rsContainer">
<div style="z-index:0;" class="rsSlide ">
<div class="rsContent">
<img class="rsImg rsMainSlideImage" src="http://166.62.38.87/~saphotonics/wp-content/uploads/2019/05/SA-62H_image1-1024x894.jpg" style="width: 555px; height: 484px; margin-left: 115px; margin-top: 30px;">
</div>
</div>
<div style="z-index:0; display:none; opacity:0;" class="rsSlide ">
<div class="rsContent">
<img class="rsImg rsMainSlideImage" src="http://166.62.38.87/~saphotonics/wp-content/uploads/2019/05/SA-62H_image2-1008x1024.jpg" style="width: 477px; height: 484px; margin-left: 154px; margin-top: 30px;">
</div>
</div>
</div>
<div class="rsFullscreenBtn">
<div class="rsFullscreenIcn"></div>
</div>
</div>
You need to do something like this:
const imgs = document.querySelectorAll('img.rsImg')
for(let img of imgs){
img.setAttribute('rel', 'lightbox');
}
The code is not tested, but I'm sure it'll guide you.
It looks like all of the images you want are tagged with the class "rsImg".
If this is the case, you can select all images with that class and add the "rel" attribute to them...
document.querySelectorAll('img.rsImg') // selects all "img" tags that have class "rsImg"
.forEach( // for each of the things selected, run the code here
n => n.setAttribute('rel', 'lightbox')
)
The following snippet runs that code, using your html from the question (with the images changed to placeholders) -- after it runs you can use your browser to inspect the element(s) and see that the rel attribute is added to each img.
document.querySelectorAll('img.rsImg').forEach(n => n.setAttribute('rel', 'lightbox'))
<div class="rsOverflow" style="width: 786px; height: 544px;">
<div class="rsContainer">
<div style="z-index:0;" class="rsSlide ">
<div class="rsContent">
<img class="rsImg rsMainSlideImage" src="//www.fillmurray.com/1024/894" style="width: 555px; height: 484px; margin-left: 115px; margin-top: 30px;">
</div>
</div>
<div style="z-index:0; display:none; opacity:0;" class="rsSlide ">
<div class="rsContent">
<img class="rsImg rsMainSlideImage"
src=" //www.fillmurray.com/1008/1024"
style="width: 477px; height: 484px; margin-left: 154px; margin-top: 30px;">
</div>
</div>
</div>
<div class="rsFullscreenBtn">
<div class="rsFullscreenIcn"></div>
</div>
</div>
I have wrote this code and it is working properly:
HTML:
<div class="service-box">
<!--Services Title 1-->
<h3>WordPress installation</h3>
<!--Content for title 1-->
<div class="service-content">
<!--Your youtube service video iframe code-->
<iframe width="420" height="315" src="https://www.youtube.com/embed/R7hHfoffIM4?rel=0" frameborder="0" allowfullscreen></iframe>
<!--Your service description-->
<p>I am offering services like:</p>
<p>WordPress installation to your already purchased domain and hosting.</p>
<p>Also I am able to create subdomain and install wordpress on it.</p>
<p>If You need me to make a WP backup, I can do that for You.</p>
<p>In case that You need me to restore your website from my previously made backup I am here for You.</p>
</div>
JS:
$(document).on('click', '.service-box', function(){
$('#siteOverlay').addClass('overlay-active');
$('#popupWindow').addClass('service-active');
$('#popupWindow #contentBox').html($(this).html()); //I will change this line
$('body').css('overflow', 'hidden');
});
Then I try to select everything except IFRAME tag like this:
$('#popupWindow #contentBox').html($(this).not($('iframe')).html());
or like this:
$('#popupWindow #contentBox').html($(this).not('iframe').html());
and it doesn't work.
I have also tried to use:not selector in all combinations like this:
$('#popupWindow #contentBox').html($(this:not).html());
Nothing is working. Is there anyone who knows the answer to this?
Thanks!
You want to remove the iframe from the html of the clicked element, not from the clicked element itself. so.... you'll have to clone it and remove it from the clone, then append it.
var clone = $(this).clone();
clone.find('iframe').remove();
$('#popupWindow #contentBox').html(clone.contents());
Is this what you want?
var clone = $(this).clone();
clone.find('iframe').remove();
$('#contentBox').empty().append(clone);
$(document).on('click', '.service-box', function() {
$('#siteOverlay').addClass('overlay-active');
$('#popupWindow').addClass('service-active');
var clone = $(this).clone();
clone.find('iframe').remove();
$('#contentBox').empty().append(clone);
$('body').css('overflow', 'hidden');
});
#siteOverlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0,0,0,0.5);
}
#siteOverlay.overlay-active {
display: block;
}
#popupWindow {
position: absolute;
top: 50px;
left: 50px;
right: 50px;
bottom: 50px;
background-color: white;
padding: 50px;
overflow-y: scroll;
}
#contentBox {
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="service-box">
<!--Services Title 1-->
<h3>WordPress installation</h3>
<!--Content for title 1-->
<div class="service-content">
<!--Your youtube service video iframe code-->
<iframe width="420" height="315" src="https://www.youtube.com/embed/R7hHfoffIM4?rel=0" frameborder="0" allowfullscreen></iframe>
<!--Your service description-->
<p>I am offering services like:</p>
<p>WordPress installation to your already purchased domain and hosting.</p>
<p>Also I am able to create subdomain and install wordpress on it.</p>
<p>If You need me to make a WP backup, I can do that for You.</p>
<p>In case that You need me to restore your website from my previously made backup I am here for You.</p>
</div>
</div>
<div id="siteOverlay">
<div id="popupWindow">
<div id="contentBox"></div>
</div>
</div>
Im working on a website that has a few different colored boxes made with divs, and I want to use them to open certain things. Whether it be music, photos, etc. Im using JS to generate a random number and use the number to choose which song to open, but I have no clue how to attach it to the div itself.
</head>
<body style="background-color:#FFF;">
<div id="center">
<div id="header">
<div id="title"><h1>welcom3 :-)</h1></div>
<div id="wrapper">
<div id="redbox">
</div>
<div id="6box">
</div>
<div id="bluebox">
</div>
<div id="greenbox">
</div>
<div id="yellowbox">
</div>
<div id="yellowboxmargin">
</div>
<div id="yellowboxmargin">
</div>
<div id="yellowboxmargin">
</div>
</div>
</div>
</body>
</html>
use jQuery
<div id="box1"></div>
<script>
$(document).ready(function() {
$("#box1").click(function(){
yourfunc();
}
})
</script>
If you need run js code without jquery, use this example.
In head:
<script>
function hello() {
// do something
}
</script>
In body:
<div onclick="hello()">Hello</div>
I would follow the advice of Buddhi Abeyratne and use jQuery. Of course, this is just a guess, but I would say that due to the nature of your project, it will make things easier for you.
jQuery has different methods to attach events to an alement. In this case, you can use the shortcut ".click()".
I leave you here a snippet:
function do_something_cool(box)
{
alert("I have code to make something awesome with " + box.attr("id"));
}
$(document).ready(function()
{
$("#wrapper div").click(function() { do_something_cool($(this)); });
});
body
{
background-color: #FFF;
}
.colored_box
{
height: 50px;
width: 50px;
margin: 5px;
}
#redbox
{
background-color: red;
}
#bluebox
{
background-color: blue;
}
#greenbox
{
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="center">
<div id="header">
<div id="title"><h1>welcom3 :-)</h1></div>
<div id="wrapper">
<div id="redbox" class="colored_box"></div>
<div id="bluebox" class="colored_box"></div>
<div id="greenbox" class="colored_box"></div>
</div>
</div>
</div>
</body>
But if you decide to don't use jQuery, here you have the vanilla javascript:
window.onload = function()
{
var boxes = document.getElementById("wrapper").getElementsByTagName("div");
for (var i = 0; i < boxes.length; i++)
{
boxes[i].addEventListener("click", do_something_cool);
}
}
function do_something_cool(evt)
{
alert("I have code to make something awesome with " + evt.target.id);
}
Btw, I guess it is just a copy/paste thing, but you forgot to close one div.
Also, pay attention to how I have separated html, js and css in the snippet. You should avoid inline js and css.
Good luck!
Im trying to create a social website which has a chat sidebar, which is just like Facebook. It has a timeline with posts in one section and a chat sidebar.
I have made the chat <div> to be fixed just like Facebook chat.
Now when the total height of elements within the chat sidebar becomes more than the page height, scrollbar appears. When i scroll through it and reach the end of it, if i scroll more, now it scrolls the posts on the timeline.
So what i want to achieve is, to make chat sidebar scroll irrelative to the timeline. to make this crystal clear, i want them to scroll separately, so if i scroll chats and it reaches the bottom, if my pointer is still on the chat sidebar and i scroll nothing should happen.
I prefer to find a way without the use of jQuery. but if its not achievable with css, i would appreciate any help on javascript as well.
Great Example: Facebook
Sample from my html
<div class="outer-container">
<div class="timeline">
<div class="contents">
<div class="header"><p>Timeline</p></div>
<div class="post-items">
<div class="post">
<div class="avatar">
<div class="frame"><img src="blabla.img" /></div>
</div>
<div class="post-block">
<div class="post-header"><p>Some Header</p></div>
<div class="post-contents"><p>Some contents</p></div>
<div class="post-footer"><p>Some footer</p></div>
</div>
</div>
</div>
</div>
</div>
<div class="sidebar right-sidebar">
<div class="chat-list">
<ul class="friends">
<div class="header"><p>Friends</p></div>
<li>
<a class="chat-item">
<div class="avatar">
<div class="frame"><img src="blabla.img" /></div>
</div>
<span class="name">James Hetfield</span>
<span class="ic ic-message"></span></a>
</li>
</ul>
</div>
</div>
</div>
Put your timeline in the timeline div and chatbar inside chatbar div. Note in the javascript I have overridden the natural behaviour of scrolling. So, when your mouse is over chatbar normal scrolling wouldn't occur.
Update: Whenever the mouse is scrolled while the cursor is over the div manually update the scrolltop property.
JSFiddle : Link
<html>
<head>
<style type="text/css">
#body{
width: 95%;
margin: auto;
}
#timeline{
width: 75%;
display: inline-block;
overflow-y: scroll;
margin: auto;
}
#chatbar{
position: fixed;
width: 15%;
display: inline-block;
max-height: 100%;
margin: auto;
overflow-y: scroll;
}
</style>
</head>
<body>
<div id="body">
<div id="timeline">
</div>
<div id="chatbar" class="scrollable">
</div>
</div>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$( '.scrollable' ).bind( 'mousewheel DOMMouseScroll', function ( e ) {
var e0 = e.originalEvent,
delta = e0.wheelDelta || -e0.detail;
this.scrollTop += ( delta < 0 ? 1 : -1 ) * 30;
e.preventDefault();
});
</script>
</body>
</html>