I'm trying to create a button that when clicked brings up a pop up window with an iframe source embedded.
However, at the moment the iframe shows up right below the button when clicked. What I need is for the iframe to show up as a window in the center of the screen.
$(function() {
$('#button').click(function() {
if (!$('#iframe').length) {
$('#iframeHolder').html('<iframe id="iframe" src="https://fixr.co/event/831401916?compact=true&theme=dark" width="700" height="450"></iframe>');
}
});
});
<button id="button">Button</button>
<div id="iframeHolder"></div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
It's just a matter of positioning your iframe container relative to the viewport. There are many ways of doing this, and the best one depends on what else is happening in your page. Here's a solution assuming that the page appears just as you've shown it. See the full page demo for a better view.
Protip: Update your jQuery version. 1.x is very old. You can often update to 3.x with no code changes. Of course, if this is all you're using it for you don't really need jQuery anyway.
$(function() {
$('#button').click(function() {
if (!$('#iframe').length) {
$('#iframeHolder').html('<iframe id="iframe" src="https://fixr.co/event/831401916?compact=true&theme=dark" width="700" height="450"></iframe>');
}
});
});
body {
position: relative;
min-height: 100vh;
}
#iframeHolder {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<button id="button">Button</button>
<div id="iframeHolder"></div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
In the code below you can see the "89%". I would like to replace that number with the value from a TextBox from my Website. How is this possible, been Looking for solutions online but havent suceed so far. The code below is used for a html i frame.
<head>
<style type="text/css">
.outer {
position: relative;
width: 600px;
height: 400px;
}
canvas {
position: absolute;
}
.percent {
position: absolute;
left: 50%;
transform: translate(-50%, 0);
font-size: 80px;
bottom: 0;
}
</style>
</head>
<body>
<div class="outer">
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<canvas id="secondContainer" width="600" height="400"></canvas>
<p class="percent">
89%
</p>
</div>
</body>
I tried the following solution. I have the orignal Website and two iframes. On the first iframe (html1) you can find a graph, which consits of the code above (and more code), where I would like to put in the number of the text box (instead of 89% --> see code above)). I then put up another ifram (html2) from where I would like to Access the TextBox, since from the original Website this doesnt seem to work. As a result I have the code below which is from iframe1. Am I on the wrong path at all or is i it a coding mistake Im doing?
<p class="percent">
<script>
$( document ).ready( function(){
var iframe = document.getElementById("#html2");
var elmnt = iframe.contentWindow.document.getElementsByTagName("#input4");
});
</script>
</p>
I'm working on adding some icons to my company's website, but I'm having trouble getting them to link to a page.
I'm using an image sprite and CSS to change the image on hover. If you click here and look under Services We Offer you can see the image hover.
I'm using a div to do this, with this code:
<div class="video-box"></div>
And in my CSS:
.video-box {
width: 184px;
height: 222px;
background: url("http://bluestarmultimedia.tv/wp-content/uploads/2015/01/rollover-video-2.png") no-repeat scroll left top transparent;
display: block;
}
.video-box:hover {background-position: -184px 0px;}
When I add a link like this, it doesn't work.
<div class="video-box"></div>
How can I get the images to link and keep the roll over?
These are some of the scripts that the website use. I think you will need to import the required JQuery scripts that are used in this website.
<script type='text/javascript' src='http://bluestarmultimedia.tv/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>
<script type='text/javascript' src='http://bluestarmultimedia.tv/wp-content/plugins/revslider/rs-plugin/js/jquery.themepunch.tools.min.js?ver=4.6.5'></script>
<script type='text/javascript' src='http://bluestarmultimedia.tv/wp-content/plugins/revslider/rs-plugin/js/jquery.themepunch.revolution.min.js?ver=4.6.5'></script>
<script type='text/javascript' src='http://bluestarmultimedia.tv/wp-content/themes/x/framework/js/dist/site/x-head.min.js'></script>
<script type='text/javascript' src='http://bluestarmultimedia.tv/wp-content/plugins/x-shortcodes/js/dist/site/x-shortcodes-head.min.js'></script>
Just test your code in Fiddle and it worked fine, maybe you need to specify more about what you really face with.
Or you could make div with link function by using span and z-index.
HTML
<div class="video-box">
<span></span>
</div>
more CSS
.video-box span {
position:absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1;
}
I think there is no problem with your code.It is working as you want.With This
<div class="video-box"></div>
And this
<div class="video-box"></div>
Here is JSFIDDLE
I want to create a landing page where:
First of all you see the logo of the website in the middle of the screen.
Then I want it to move to its proper position. And then the full page loads.
Is this possible?
Thanks in advance!
EDIT2:
Now I have this:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<link type="text/css" rel="stylesheet" href="style.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function() {
$(".loader").delay("1000").animate({top:"-=30px", width:"300px", height:"300px",})
})
</script>
</head>
<body>
<div class="loader"></div>
</body>
</html>
CSS:
.loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('http://upload.wikimedia.org/wikipedia/commons/8/87/Google_Chrome_icon_(2011).png') 50% 50% no-repeat rgb(249,249,249);
}
But now the image, doesnt resize but just crops the sides of this images.
So you get this as a page: http://prntscr.com/47t9rg
Some help?
Just search/try some thing instead of asking entire code.
Try below code, this may work.
$(".loader").animate({
left: someValue,
top: someValue
}, 1000)
For starters, you should use:
jQuery(document).ready(function(e) {
jQuery(".loader").delay("1000").fadeOut("slow");
});
Second, you'll want to use jQuery's animate. Then, simply change the left position to wherever you want it to go.
Use jQuery animate and wrap the animation within $(document).ready(
$(document).ready(function () {
$("#Logo").animate({
left: "-=100px"
}, 1000, function () {
// Animation complete.
//Send AJAX Request to fetch content, or redirect to another page?
});
});
JsFiddle
What this does;
Wait until the document is ready (all elements have loaded)
Animate the #Logo element to go left 100px (in the CSS on JSFiddle, that is half the width of the container) - resulting in it being in the top left corner
Is there a method in html which makes the webpage scroll to a specific Element using HTML !?
Yes you use this
<div id="google"></div>
But this does not create a smooth scroll just so you know.
You can also add in your CSS
html {
scroll-behavior: smooth;
}
You should mention whether you want it to smoothly scroll or simply jump to an element.
Jumping is easy & can be done just with HTML or Javascript. The simplest is to use anchor's. The limitation is that every element you want to scroll to has to have an id. A side effect is that #theID will be appended to the URL
Go to Title
<div>
<h1 id="scroll">Title</h1>
</div>
You can add CSS effects to the target when the link is clicked with the CSS :target selector.
With some basic JS you can do more, namely the method scrollIntoView(). Your elements don't need an id, though it is still easier, e.g.
function onLinkClick() {
document.getElementsByTagName('h2')[3].scrollIntoView();
// will scroll to 4th h3 element
}
Finally, if you need smooth scrolling, you should have a look at JS Smooth Scroll or this snippet for jQuery. (NB: there are probably many more).
<!-- HTML -->
<div id="google"></div>
/*CSS*/
html { scroll-behavior: smooth; }
Additionally, you can add html { scroll-behavior: smooth; } to your CSS to create a smooth scroll.
Year 2020. Now we have element.scrollIntoView() method to scroll to specific element.
HTML
<div id="my_element">
</div>
JS
var my_element = document.getElementById("my_element");
my_element.scrollIntoView({
behavior: "smooth",
block: "start",
inline: "nearest"
});
Good thing is we can initiate this from any onclick/event and need not be limited to tag.
If you use Jquery you can add this to your javascript:
$('.smooth-goto').on('click', function() {
$('html, body').animate({scrollTop: $(this.hash).offset().top - 50}, 1000);
return false;
});
Also, don't forget to add this class to your a tag too like this:
Text
Here is a pure HTML and CSS method :)
html {
scroll-behavior: smooth;
/*Adds smooth scrolling instead of snapping to element*/
}
#element {
height: 100px;
width: 100%;
background-color: red;
scroll-margin-block-start: 110px;
/*Adds margin to the top of the viewport*/
scroll-margin-block-end: 110pxx;
/*Adds margin to the bottom of the viewport*/
}
#otherElement {
padding-top: 500px;
width: 100%;
}
Link
<div id="otherElement">Content</a>
<div id="element">
Where you want to scroll
</div>
<div id="otherElement">Content</a>
<nav>
1
2
3
</nav>
<section id="section1">1</section>
<section id="section2" class="fifty">2</section>
<section id="section3">3</section>
<style>
* {padding: 0; margin: 0;}
nav {
background: black;
position: fixed;
}
a {
color: #fff;
display: inline-block;
padding: 0 1em;
height: 50px;
}
section {
background: red;
height: 100vh;
text-align: center;
font-size: 5em;
}
html {
scroll-behavior: smooth;
}
#section1{
background-color:green;
}
#section3{
background-color:yellow;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" >
$(document).on('click', 'a[href^="#"]', function (event) {
event.preventDefault();
$('html, body').animate({
scrollTop: $($.attr(this, 'href')).offset().top
}, 500);
});
</script>
I got it working by doing this, consider that top-page is the element that you want to scroll to:
document.getElementById("top-page").scrollTo({ behavior: "smooth", top: 0 });
Yes, you may use an anchor by specifying the id attribute of an element and then linking to it with a hash.
For example (taken from the W3 specification):
You may read more about this in Section Two.
...later in the document
<H2 id="section2">Section Two</H2>
...later in the document
<P>Please refer to Section Two above
for more details.
By using an href attribute inside an anchor tag you can scroll the page to a specific element using a # in front of the elements id name.
Also, here is some jQuery/JS that will accomplish putting variables into a div.
<html>
<body>
Click here to scroll to the myContent section.
<div id="myContent">
...
</div>
<script>
var myClassName = "foo";
$(function() {
$("#myContent").addClass(myClassName);
});
</script>
</body>
Should you want to resort to using a plug-in, malihu-custom-scrollbar-plugin, could do the job. It performs an actual scroll, not just a jump. You can even specify the speed/momentum of scroll. It also lets you set up a menu (list of links to scroll to), which have their CSS changed based on whether the anchors-to-scroll-to are in viewport, and other useful features.
There are demo on the author's site and let our company site serve as a real-world example too.
The above answers are good and correct. However, the code may not give the expected results. Allow me to add something to explain why this is very important.
It is true that adding the scroll-behavior: smooth to the html element allows smooth scrolling for the whole page. However not all web browsers support smooth scrolling using HTML.
So if you want to create a website accessible to all user, regardless of their web browsers, it is highly recommended to use JavaScript or a JavaScript library such as jQuery, to create a solution that will work for all browsers.
Otherwise, some users may not enjoy the smooth scrolling of your website / platform.
I can give a simpler example on how it can be applicable.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
// Add smooth scrolling to all links
$("a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
</script>
<style>
#section1 {
height: 600px;
background-color: pink;
}
#section2 {
height: 600px;
background-color: yellow;
}
</style>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Smooth Scroll</h1>
<div class="main" id="section1">
<h2>Section 1</h2>
<p>Click on the link to see the "smooth" scrolling effect.</p>
Click Me to Smooth Scroll to Section 2 Below
<p>Note: Remove the scroll-behavior property to remove smooth scrolling.</p>
</div>
<div class="main" id="section2">
<h2>Section 2</h2>
Click Me to Smooth Scroll to Section 1 Above
</div>
</body>
</html>