Select everything except iframe by using $(this) and .not - javascript

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>

Related

Html popup div fullscreen inside another div

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.

div with iframe in it, display none

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/

GreaseMonkey UserScript for Remove HTML Section of a website

I installed "Greasemonkey" to remove part of HTML code for specific site.
i found "jQuery" code for removing
function removeByClass(className) {
$("."+className).remove();
}
I tried to replace the "ClassName" with "news_ticker" but it did not worked out.
I do not have much information in java language
the HTML section code that I want to remove as below
<div class="news_ticker">
<div class="title"><a title="Title";</a></div>
<div class="ticker">
<div class="wrapper">
<div class="ticker_feeds">
<span class="aa_icon">"headline"</span>
<span class="aa_icon">"headline"</span>
<span class="aa_icon">"headline"</span>
<span class="aa_icon">"headline"</span>
<span class="aa_icon">"headline"</span>
</div>
</div>
<div class="controls"><a class="prev" title=""></a><a class="pause" title=""></a><a class="next" title=""></a></div>
</div>
</div>
<style>
.static_banner01 {
clear: both;
overflow: hidden;
padding-bottom: 10px;
position: relative;
}
.banners{
overflow: hidden;
width: 190px;
float: right;
}
.m15{
margin-left:14px;
}
.m18{
margin-left:20px;
}
.m10{
margin-left:10px;
}
.w155,
.w155 a{
width:155px !important;
}
.banners a{
width: 190px;
height: 80px;
}
.banners.last{
margin-left:0;
}
</style>
You need to include jQuery to your userscript if you want to be able to use it.
Try adding // #require http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js to the metadata header block of your script.
See Wiki greasespot article about adding external libraries like jQuery.
Remember that you can use the console (Ctrl+Shift+K on Windows / Firefox for example) in order to see error messages which could help you to find what is wrong with your code.
Finally, know that you not necessarily have to use jQuery to such a simple manipulation. Javascript alone is more than enough:
function removeByClass(className) {
var elements = document.getElementsByClassName(className);
for (var i = 0; i < elements.length; i++) {
elements[i].outerHTML = "";
}
}
Try
<script>
function removeByClass(news_ticker) {
$(".news_ticker").remove();
}
</script>
or simply
<script>
$(".news_ticker").html('');
</script>
Read this fro more information
1st issue of removing headline has been solve by below code thanks to V P
$("div").remove(".news_ticker");
now the site play video automatically, so i need to remove the video from main page.
below code is for video section:
<div class="wrapper">
<div class="headline"><a title="test" href="test.html">test</a></div>
<div class="img_teaser">
<span class="LimelightEmbeddedPlayer">
<div id="*.mp4"></div>
<video id="html5video" dir="ltr" class="video-js vjs-default-skin" autoplay preload="auto" loop width="395" height="296" data-setup='{}'>
<source src="*.mp4" type='video/mp4' />
<p class="vjs-no-js">To view this video please enable JavaScript and consider upgrading your web browser</p>
</video>
</span>
<p class="caption"><span class="source">test</span> test ... <a title="test" href="test.html">test</a></p>
</div>
</div>
I tried below codes:
did not work
$("span").remove(".LimelightEmbeddedPlayer");
did not work
$("div").remove(".LimelightEmbeddedPlayer");
when there is no video the site insert image, but this line remove video and image together.
$("div").remove(".img_teaser");
after some test find the solution (just remove the videos)
$("div span").remove(".LimelightEmbeddedPlayer");
I hope this help others who search for similar "userscript" for "Greasemonkey"

Pieces of image stick around after altering display to "display: none"

I've been using the following function to hide my div's when I no longer wanted them to be visible
function hide(div) {
document.getElementById(div).style.display = 'none';
}
However the problem has arrived with the div inparticular.
<div id="loading">
<img src="./img/loading.gif"/>
</div>
When I call the function hide('loading') only parts are the image are hidden, and slices of it are burnt onto the page. Considering this is supposed to be a little loading icon, having is stamped into the page isn't really what I'm going for, how can I prevent this?
I'm using the loading icon while processing network data, then hiding it upon receiving and processing data from the server(nodejs).
css as requested:
#loading {
position: fixed;
top: 50%;
left: 50%;
margin-top: -64px;
margin-left: -64px;
z-index: 999;
}
can u try this..??
Html
<div id="one">
<img src="https://elora.aerb.gov.in/ELORA/images/loadingnew.gif">
</div>
<div id="two">
<img src="http://www.schultzlawoffice.com/img/loading/loading.gif">
</div>
Script
$(document).ready(function () {
$("div").on("click", function () {
var thisId = $(this)
hide(thisId);
});
});
function hide(thisId) {
$(thisId).hide();
}
Fiddle Sample

Writing a JavaScript function to open an image in (css)pop up with a close button?

I am a new HTML developer, so can someone please describe briefly how to write a JavaScript function to open an image in (css) pop up with a close button?
Just to get you started I've set up an simple example for you, try it out here: http://www.lunarailways.com/demos/popup.html
<html>
<head>
<style>
#popup {
border: 1px solid gray;
border-radius: 5px 5px 5px 5px;
float: left;
left: 50%;
margin: auto;
position: fixed;
top: 200px;
z-index: 9999;
}
</style>
</head>
<body>
<h1>Your page</h1>
Open Image 1
Open Image 2
Open Image 3
<div id="popup" style="display:none">
<a id="popup-close" href="" class="button">Close</a>
<p>
<img id="image-placeholder" src="">
</p>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>
<script type="text/javascript">
$(document).ready( function() {
$(".popup-open").click( function(e) {
$("#popup:visible").hide(); //hide popup if it is open
e.preventDefault(); // don't follow link
$("#image-placeholder").attr("src", $(this).attr("href")); // replace image src with href from the link that was clicked
$("#popup").fadeIn("fast"); //show popup
});
$("#popup-close").click( function(e) {
e.preventDefault();
$("#popup").fadeOut("fast");
});
});
</script>
</body>
</html>
FanyBox, which is uses the jQuery library is the right tool for that.
In a simple way,
- place anchor and image tags in a div container.
- set display attribute of the div to "none".
- create displayMyPopup and closeMyPopup functions in js.
- set anchor's onclick attribute to closeMyPopup.
- in displayMyPopup function, set the div's display attribute to "block"
- in closeMyPopup function, set the div's display attribute to "none"
or you can use jquery's show/hide functions.
I guess jQuery library is a good start. Start with defining your HTML markup and then google image galleries and see what fits your bill.
Something like this:
<ul class="gallery">
<li><img src="path-small-image" alt="thumbnail" /></li>
</ul>

Categories