I have a popup form in html based website ,in popup form there are three options,if I click on first option then it goes to that particular section,but popup form remains there.if I click on close then form will close.but I want automatically form close if I visit particular section.
below is my code.
Picture of the website
<html>
<body>
<!-- popup form start here -->
<div id="popScroll">
<div class="popScroll">
<div class="popup">
<div id="option">
<!-- Home -->
<!-- Close -->
<!-- <button class="btn" id ="close-btn"> Close </button> -->
<div class="text">
<img src="demo.png" alt=""><br>
Chemical
</div>
<div class="text">
<br>
logistics
</div>
<div class="text">
<img src="demo.png" alt="polymer">Polymer
</div>
<!-- <span onclick="document.getElementById('popScroll').style.display='none'" class="w3-button w3-display-topright" class="boxi">Close</span> -->
</div><br><br>
<span onclick="document.getElementById('popScroll').style.display='none'" class="w3-button w3-display-topright" >Close</span>
</div>
</div>
</div>
</body></html>
I'm not exactly sure what you are trying to achieve but I assume you want to close a popup whenever you scroll down to a certain section within your site?
To achieve this, you could use the Intersection Observer.
More information here: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
What you can do is add click functionality on options using click listener and close modal after a user clicks on options.
// NOTE: choose appropriate id according to your code
const popup = document.querySelector('#popup'); // id is popup id
const first = document.querySelector('#first'); // first is id of first option
first.addEventListener('click', function sectionClickListeners() {
// Perform some tasks...
popup.style.display = 'none';
})
This website gives a good understanding of using modals and gives different examples.
https://jquerymodal.com/
Related
I am trying to make Bootstrap 4 dropdown have this style: slinky.js.org
This is what I have by now: https://codepen.io/nht910/pen/yLexeEM
Main code:
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<div class="main-container">
<div class="menu-container">
<div class="menu-1">
<span>Link-1</span>
<button class="button-1">arrow-1</button>
</div>
<div class="menu-2">
<span>Link-2</span>
<button class="button-2">arrow-2</button>
</div>
</div>
<div class="submenu-container">
<div class="submenu-1"> <!-- submenu of .menu-1 -->
<div class="arrow-back">
<button class="button-back-1">Arrow back 1</button>
</div>
<div>
<span>Child 1</span>
</div>
</div>
<div class="submenu-2"> <!-- submenu of .menu-2 -->
<div class="arrow-back">
<button class="button-back-2">Arrow back 2</button>
</div>
<div>
<span>Child 2</span>
</div>
</div>
</div>
</div>
</div>
To make dropdown has slide effect:
I set two classes .submenu-1 and .submenu-2 to display: none, and when user click on arrow button, corresponding submenu will be shown and slide to it.
when user click on arrow back, it will slide back to main menu, and after finish sliding effect, it will hide submenu.
That is what I have for now. But I don't know how to resize dropdown's height to fit content inside it (dynamic height) like slinky.js.org.
Thank you so much.
Try using hide & code when you click.
you can simply do it by using jQuery
$("selector").hide() & $("selector").show()
when user clicks your custom buttons
Solution: https://codepen.io/nht910/pen/OJMobEm
I change height of dropdown using JS with .submenu-1 is the content I want dropdown to fit:
$('.dropdown-menu').height($('.submenu-1').outerHeight());
But it got one problem. At the first time I click on arrow button (it is the first time height of dropdown changed), the transition animation doesn't work. But after that, it work perfectly. So I add another line at global to make the first time that height is changed happen on page load. And now it work perfectly for me.
I have a signup/login page index.html and my homepage indexHome.php. I need to find a way to display a welcome message only once every time a user either logs in or signs up (welcome modal/welcome back modal). I think I can do it by using the form submission buttons on either the signup or login submit buttons and then pass that to the indexHome.php. I think another option would be to use localSession, localStorage, or cookies in my script on indexHome.php to do this, but I'm not really sure how. I have looked through other threads and haven't been able to find a way to do this. I have been working on the issue for a few days and am in need of some assistance. Any help is appreciated! :)
<div id="id05" class="modal" >
<form class="modal-content">
<div class="container">
<h1><?php echo "Welcome, ".$firstname."!"?></h1>
<span onclick="document.getElementById('id05').style.display='none'" class="close2" title="Close Modal">×</span>
<hr>
</div>
</form>
</div>
<div id="id06" class="modal" >
<form class="modal-content">
<div class="container">
<h1><?php echo "Welcome back, ".$firstname."!"?></h1>
<span onclick="document.getElementById('id05').style.display='none'" class="close2" title="Close Modal">×</span>
<hr>
</div>
</form>
</div>
As of right now, I have this:
<body onload = "welcome()">
function welcome() {
document.getElementById('id05').style.display='block';
}
...which loads one of the modals on every refresh of the page.
Thanks!
add an event listener to your form submission buttons whenever they click 'sign up' or 'log in' that turns your modals display from none to block. Here's an example in which I will grab an element with the class form-Submit and display the welcome modal whenever they click the form submission button. I hope this helps
var formSubmit = document.querySelector('.form-Submit');
formSubmit.addEventListener('click', () => {document.getElementById('id05').style.display='block'})
Using Bootstrap, an application has a page with one form and multiple panels, each with a submit button. The first panel's button is the form default button whenever the Enter key is pressed. When a user fills in text inputs in the second panel and hits Enter, the second panel's button value should be sent to the Controller, but the first panel button's value, the form default button, is always sent instead.
I've tried adding a script to trigger focus or activation on the appropriate panel button when that panel is clicked or activated, to no avail. Does anyone know how to target a panel button for submission when it's panel is the one being used by the User? Thanks in advance!
Snippet:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://bootswatch.com/bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default" id="basicsPanel">
<div class="panel-heading">Basic Info</div>
<div class="panel-body">
<div class="row">
<!-- Text boxes and such -->
</div>
<div class="row">
<!-- This is always the default button upon pressing Enter key -->
<button type="submit" id="saveBasics" name="buttonCommand" class="btn btn-success pull-right" value="Save Basics">Save Basics</button>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="panel panel-info" id="ownerPanel">
<div class="panel-heading">Owner</div>
<div class="panel-body">
<div class="row">
<div class="col-lg-4">
<!-- Other text boxes and such -->
</div>
</div>
<div class="row">
<div class="col-lg-12 text-right">
<!-- This button should be the one used when a User presses the Enter key while filling in data in this panel -->
<button type="submit" id="saveOwner" name="buttonCommand" class="btn btn-success" value="Save Owner">Save Owner</button>
</div>
</div>
</div>
</div>
</div>
</div>
Example of attempted script, which does indeed focus on the correct button when a panel is activated, but prevents the user from actually entering information into the panel's text boxes:
$("#ownerPanel").click(function () {
$("#saveOwner").focus();
});
$("#basicsPanel").click(function () {
$("#saveBasics").focus();
});
As of HTML5, the default button is the first button defined. You have a couple options to handle multiple buttons with enter presses:
Define multiple forms, each with one submit button. That way each panel is tied directly to the button you want it to use. This is nice and clean if the forms are independent, but if you still want the data from all forms, you'd need to catch the submission in JavaScript and pull the other forms' data into the payload.
Capture the keypress event in JavaScript and use the currently focused field to determine which button should be pressed. This lets you keep a single form with all the data in one place. A simple strategy for picking the button to use might be to traverse from the focused field to .closest('panel') and then back down to children('input[type=submit]').
I'm trying to find a way to make a replace button on my page. I've looked around the web but all I found was a replace text script. What I want is to replace both the text in my h1 tag and the text in the article. If its possible to just replace the whole div with another div it would be great.
To explain a bit more accurate on my page: www.bravitus.com
I want at the "OM MIG" section, a button where I could switch out the content, for something else like some info about bravitus. I'd like a button to click that replaces only the orange section.
Here's a bit of my mark-up:
<div class="full-page" id="page-2">
<div class="container">
<h1 style="color:white;" >Hvem er jeg</h1>
<div class="columns eight"><article> Lorem ipsum </article>
</div>
I want to replace all content in the page-2, or just switch out the whole page-2 div with another.
Is that possible?
Here we go, a small demo on jsFiddle (http://jsfiddle.net/json/8cu34y4L/).
There are three buttons with the data-switch attribute. The attribute indicates what block inside the page-2 will be shown, when the button is clicked.
HTML
<button data-switch="#about_me">Click to read about me</button>
<button data-switch="#education">Click to show my education</button>
<button data-switch="#about_name_bravitus">Click to read about the name Bravitus</button>
<div id="page-2">
<div id="about_me" class="container">
<h1>This is about me section</h1>
<div>about me about me about me</div>
</div>
<!-- Hidden blocks that you show when the appropriate button is clicked. -->
<div id="education" class="container" style="display: none;">
<h1>This is about my education</h1>
<div>education education education</div>
</div>
<div id="about_name_bravitus" class="container" style="display: none;">
<h1>This is about the name bravitus</h1>
<div>bravitus bravitus bravitus</div>
</div>
</div>
JS (you need jQuery)
// Listening to a button click.
$('[data-switch]').on('click', function (e) {
var $page = $('#page-2'),
blockToShow = e.currentTarget.getAttribute('data-switch');
// Hide all children.
$page.children().hide();
// And show the requested component.
$page.children(blockToShow).show();
});
I'm not sure if I understood what you want.
But if you just want to replace all html inside page-2, you simply can do that (with jQuery):
var html = // Here comes your html
$('#page-2').html(html);
So im not sure if this is the correct way but what i ended up doing was this
function myFunction(){
document.getElementById("fisk").innerHTML = "Hvem er du"
}
<button onclick="myFunction()">Click me</button>
Now i just have to find a way to make it replace more than text. to replace divs and other tags all together.
Just add this link and execute the below code:
script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"
Click to read about me
Click to show my education
Click to read about the name Bravitus
<div id="about_me" class="container">
<h1>This is about me section</h1>
<div>about me about me about me</div>
</div>
<!-- Hidden blocks that you show when the appropriate button is clicked. -->
<div id="education" class="container" style="display: none;">
<h1>This is about my education</h1>
<div>education education education</div>
</div>
<div id="about_name_bravitus" class="container" style="display: none;">
<h1>This is about the name bravitus</h1>
<div>bravitus bravitus bravitus</div>
</div>
JS (you need jQuery)
// Listening to a button click.
$('[data-switch]').on('click', function (e)
{
var $page = $('#page-2'),
blockToShow = e.currentTarget.getAttribute('data-switch');
// Hide all children.
$page.children().hide();
// And show the requested component.
$page.children(blockToShow).show();
});
I'm currently making a website for a university project where I'm using a piece of Javascript ( http://buildinternet.com/project/supersized/ ) in order to generate a background that is a gallery of several images.
I'm trying to set the site so that it will display a single image as the background in the event of Javascript being turned off, but the navigation elements of this slideshow are generated using HTML code outside of the script tags and inside the body tag.
Is there a way I can set this HTML code so that it will only be included when Javascript is active, leaving the screen clear of the navigation controls when it isn't?
At request the code I'm trying to isolate is the Div tags being called below.
<!--Thumbnail Navigation-->
<div id="prevthumb"></div>
<div id="nextthumb"></div>
<!--Arrow Navigation-->
<!-- <a id="prevslide" class="load-item"></a>
<a id="nextslide" class="load-item"></a>
<div id="thumb-tray" class="load-item">
<div id="thumb-back"></div>
<div id="thumb-forward"></div>
</div>
<!--Time Bar-->
<!--<div id="progress-back" class="load-item">
<div id="progress-bar"></div>
</div>
<!--Control Bar-->
<div id="controls-wrapper" class="load-item">
<div id="controls">
<a id="play-button"><img id="pauseplay" src="img/pause.png"/></a>
<!--Slide counter-->
<div id="slidecounter">
<span class="slidenumber"></span> / <span class="totalslides"></span>
</div>
<!--Slide captions displayed here-->
<div id="slidecaption"></div>
<!--Thumb Tray button-->
<a id="tray-button"><img id="tray-arrow" src="img/button-tray-up.png"/></a>
<!--Navigation-->
<ul id="slide-list"></ul>
</div>
</div>
Like #jumpingcode mentioned, you would want to hide the controls in question with CSS, and show them with JavaScript.
Hide the div with CSS:
#controls-wrapper {
display:none;
}
Then show it in your page with jQuery:
$('#controls-wrapper').show();
Or use .css() to have more control over what type of display property to use:
$('#controls-wrapper').css('display', 'block');