Been trying to make a button which opens a div containing another html page. I had the button working but the main page was opening with the div shown already, I needed it hidden. After messing it all up I'm stuck on this. The button doesn't work.
html
<p>Press the button</p>
<button id="button1" onClick="show()">Show / Hide</button>
<div id="Ahover">
<object type="text/html" data="http://validator.w3.org/"></object>
</div>
css
#Ahover {
display:none;
overflow: hidden;
border:1px ridge blue;
}
object {
width:760px;
height:600px;
}
js
$('#button1').click(function(){
$('#Ahover').toggle()
});
Fiddle
Any help, what I'm I doing wrong? And is this even possible.
Thanks, got it working in the end by moving the script into tag.
Try This code:
HTML:
<p>Press the button</p><button id="button1">Show / Hide</button>
<div id="Ahover">
<object type="text/html" data="http://validator.w3.org/" >
</object></div>
CSS:
#Ahover {
display:none;
overflow: hidden;
border:1px ridge blue;
}
object {
width:760px;
height:600px;
display:inline-block
}
JS:
$('#button1').on('click',function(e){
$('#Ahover').toggle();
});
Demo is here:
https://jsfiddle.net/Dee0565/aaqfykz3/2/
html:
<p>Press the button</p><button id="button1" >Show / Hide</button>
<div id="Ahover"></div>
js:
$('#button1').click(function(){
$('#Ahover').toggle();
$("#Ahover").html('<object data="http://validator.w3.org/" />');
});
css:
div {
height: 100%;
}
object {
width: 100%;
min-height: 100%;
}
js fiddle: http://jsfiddle.net/SsJsL/
Check out the working demo here - http://jsfiddle.net/x2qjdfwk/
The only change is to remove the show() function from the button as you are already applying the jQuery click event to it.
<p>Press the button</p><button id="button1">Show / Hide</button>
And make sure you include the jQuery library.
Related
So I've just started with Javascript and learning the Jquery library, I have this simple box which I created in CSS and was animating it with Jquery, when a button is clicked the box gets bigger but when another is clicked it returns to its original size.
I've got the button to make the box bigger to work just fine but I can't seem to get the button to make it smaller to actually make it smaller.
$(".big").click(function() {
$(".box1").animate({
height: '+=150px',
});
});
$(".small").click(function() {
$(".box1").animate({
width: '-=150px;'
});
});
.box1 {
border: 1px solid red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='box1'></div>
<button type='button' class='big'>big</button>
<button type='button' class='small'>small</button>
I don't understand why it won't work, sorry if this comes across as a silly question.
The reason why it's not working is that you added ; in height: '-=150px;'
If you remove it it's working just fine.
Demo
$(".big").click(function() {
$(".box1").animate({
height: '+=150px',
});
});
$(".small").click(function() {
$(".box1").animate({
height: '-=150px'
});
});
.box1{
width:10px;
height:10px;
background-color:blue}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="small">small</div>
<div class="big">big</div>
<div class="box1"></div>
I want the screen to scroll down to the div. This div has an ID of 'weather-data'
I have tried the following;
document.getElementById('weather-data').scrollIntoView();
I have also tried using anchor tags this did not seem to work
The button which the user will click:
<button id="submit" onclick="myFunction()">
Submit
</button>
The function that runs when the button is clicked:
function myFunction(){
cityName();
getData();
clear();
document.getElementById('weather-data').scrollIntoView();
}
This is the div I want the screen to scroll to:
<div id="weather-data">
</div>
use the anchor tag to link the the div
body{
margin: 0;
}
div{
height: 100vh;
border: 1px solid black;
}
<html>
<body>
<div id='a'>a</div>
<div id='b'>b</div>
<div id='c'>c</div>
<div id='d'>d</div>
<div id='e'>e</div>
<button><a href='#c'>go to c</a></button>
</body>
</html>
I fixed the issue I had to write an if statement to check if there was any text in the h1 element.
if(weatherMain != null){
document.getElementById('icon').scrollIntoView();
document.getElementById('weather-main').scrollIntoView();
}
I want to change the background image of one div when the mouse is over a different div, using jQuery.
jQuery(function() {
jQuery('.linktomouseover').mouseover(function() {
$(.linktomouseover2).css('background-image', "url('test.jpg')");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="linktomouseover">
<a class="nthn">link1</a>
</div>
<div class="linktomouseover2">
<a class="test">link2</a>
</div>
So when mouse is over div with class linktomouseover it will actually change the background of div with class linktomouseover2
this does not seem to work. please help?
You're missing quotes in the code jQuery(.linktomouseover)
This is the correct code
jQuery(function() {
jQuery(".linktomouseover").mouseover(function() {
jQuery(".linktomouseover2").css('background-image', "url('test.jpg')");
});
});
DEMO
this is a mistake on your code.
jQuery:
jQuery('.linktomouseover2').mouseover(function() {
$('.linktomouseover').css('background-image', "url('http://cdn.androidpolice.com/wp-content/uploads/2012/11/nexusae0_wallpaper_01.jpg')");
});
HTML:
<div class="linktomouseover">
<a class="nthn">link1</a>
</div>
<div class="linktomouseover2">
<a class="test">link2</a>
</div>
CSS:
.linktomouseover{
position:relative;
display:block;
width:100%;
background:#e7e7e7;
height:200px;
}
.linktomouseover2{
position:relative;
display:block;
width:100%;
background:#d7d7d7;
height:200px;
}
Live Demo On JSFiddle
I put an input button, and set its background with an image, now Ii want to change that image when the button is clicked.
Here is my relevant code:
<div id='back'>
<input type="button"/>
</div>
CSS code:
#back input{
width: 130px;
height: 130px;
background: url(img/back_default.png);
border: hidden;
}
Can it be done in CSS (as with links-<a> tags), or should I rely to JavaScript instead? Thanks.
Javascript is not needed:
#back input {
width: 130px;
height: 130px;
background: url(img/back_default.png);
border: hidden;
}
#back input:active {
background-image: url(img/back_default-active.png);
}
This should work with JavaScript:
function change() {
document.
getElementById("back").
getElementsByTagName("input").
style.backgroundImage = "url(img/anotherImage.png)"
}
Call it from your button click (or from anywhere you want):
<div id='back'>
<input type="button" onclick="change()"/>
</div>
It's as Matt Said you could use CSS's active pseudo class to change the background or alternatively you could use javascript to add an eventHandler (onClick Listner )to the button that changes the image.
HTML
<div id='back'>
<input type="button" id="xyz" value="Go to back" class="button"/>
</div>
JS
<script>
el = document.getElementById('xyz');
el.addEvenListener("click",changeImg,false);
function changeImg()
{
el = document.getElementById('xyz');
el.style.backround="url('img/back_default-active.png')";
}
</script>
In my asp page, i want to show a popup window whenever user clicks the button.The popup window contains one text box and submit button for getting the filepath from the user.
for example : i want a popup like this in stackoverflow site...
Please hele me to get this...
Here is a EDITED:demo.Customize it to suit your needs.Let me know if need further help.
I have added a link which will display the popup on click.
After that the popup div is the actual popup , the popup div contains another div , just to hold the contents , in this case textbox and buttons.Here is the Html part.
<a id="popuplink" href="#">Click Me</a>
<div id="popup">
<div id="content">
<input type="text"/><input type="Button" value="Browse..."/>
<input id="popupclose" type="Button" value="Close"/>
</div>
</div>
Here is CSS:
#popup
{
display:none;
position:fixed;
width:250px;
height: 150px;
top: 50%;
left: 50%;
margin-left:-155px;
margin-top:-110px;
border:5px solid red;
background-color:#DEDFDE;
padding:30px;
z-index:102;
font-family:Verdana;
font-size:10pt;
border-radius:10px;
-webkit-border-radius:20px;
-moz-border-radius:20px;
font-weight:bold;
}
#content
{
height:auto;
width:250px;
margin:60px auto;
}
#popupclose
{
margin:35px 0 0 80px;
width:50px;
}
EDIT:
To get the value of the textbox check This demo
To call the javascript function on click of Asp.Net Button , try doing something like this.
Create a function which will show the popup.
function ShowPopUp()
{
$('#popup').show("slow");
}
And on button click try this,
ClientScript.RegisterStartupScript(GetType(), "popup", "ShowPopUp()", true);
Additional Information MSDN
If I understand you correctly you want to use window.open, here's some info: https://developer.mozilla.org/en/DOM/window.open
Do you need something like this (this is a crude example as I don"t know the name of your page, etc, etc...):
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function open_win() {
window.open("mypage.html");
}
</script>
</head>
<body>
<form>
<input type="button" value="Open Window" onclick="open_win()">
</form>
</body>
</html>
However I'd advise doing this in an unobtrusive manner.