I have this menu in HTML / CSS:
HTML:
<div id="outer">
<div id="inner">King Kong</div>
<div id="inner">Table</div>
CSS:
#inner {
background-color: #547980;
width: 130px;
margin-left: 8px;
}
#inner:first-child {
background-color: #547980;
width: 130px;
margin-left: 8px;
margin-top: 8px;
}
div {
border-radius: 5px;
border: 2px solid black;
}
and I want load page in jQuery.
It can be like printer, after click on link from menu it should start from margin-left position 140 and printing to margin-right position 20 or
Loading like book when you go to another page.
But I don't know how to do it. Any advice please?
With jQuery you can use this script:
$('body').on('click', 'a', function(event) {
event.preventDefault();
var href = $(this).attr('href');
$('.result').load(href);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Menu Link
<div class="result"></div>
Related
Maybe the question is confusing but let me give you an example, when I spam click the button that toggles the width, the div with keep on animating way after the button press and it doesn't look amazing. What I want is for the div to stop midway and go the other way and not complete its existing animation when the button is pressed again.
$(document).ready(function() {
$('.menuToggle').click(function() {
$(".menuContainer").animate({
width: 'toggle'
});
});
});
.menuContainer {
height: 100px;
width: 50px;
float: left;
position: relative;
background-color: black;
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menuContainer">
<!-- Menu Items -->
</div>
<h4 class="menuToggle">Show Menu</h4>
Here is the fiddle, so you can see what exactly what I'm talking about. Try spamming the "Show Menu" button.
https://jsfiddle.net/x14usdga/5/
Help would be greatly appreciated, I have looked everywhere and I can't seem to find anything on my problem.
You can use .stop() method. Try this
$(document).ready(function() {
$('.menuToggle').click(function() {
$(".menuContainer").stop().animate({
width: 'toggle'
});
});
});
.menuContainer {
height: 100px;
width: 50px;
float: left;
position: relative;
background-color: black;
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menuContainer">
<!-- Menu Items -->
</div>
<h4 class="menuToggle">Show Menu</h4>
You can check if element is not animated before do animation
https://api.jquery.com/is/
https://api.jquery.com/animated-selector/
$(document).ready(function(){
$('.menuToggle').click(function(){
if( $('.menuContainer').is(':animated') ) { return false; }
$(".menuContainer").animate({width: 'toggle'});
});
});
.menuContainer{
height: 100vh;
width: 15vw;
float: left;
position: relative;
background-color: black;
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menuContainer">
<!-- Menu Items -->
</div>
<h4 class="menuToggle">Show Menu</h4>
I am having issues with reloading a php file into 3 separate divs independently via ajax.
There is a ton of old code out there so I'm trying to find the most recent elegant solution.
I based this version on this code from https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_ajax_ajax which loads a text file.
The main index.php file has 3 containers with div1, div2, and div3 areas in each.
There is a button for each which should reload a php page called colors.php into each separate div. The colors.php page shows a different color every time it loads. It's this. Reload the page to see color change.
http://spillway.com/example/colors.php
Here is the attempt
http://spillway.com/example
Thanks for any info.
The code:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>ajax php reload div example</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- set up div links with ajax -->
<script>
$(document).ready(function(){
$("button").click(function(){
$.ajax({url: "colors.php", success: function(result){
$("#div1").html(result);
}});
});
});
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.ajax({url: "colors.php", success: function(result){
$("#div2").html(result);
}});
});
});
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.ajax({url: "colors.php", success: function(result){
$("#div3").html(result);
}});
});
});
</script>
<!-- CSS for divs and containers -->
<style>
.container1 {
position: absolute;
margin: auto;
border: 3px solid green;
text-align: center;
left: 100px;
top: 25%;
padding: 10px;
}
.container2 {
position: absolute;
margin: auto;
border: 3px solid green;
text-align: center;
left: 500px;
top: 25%;
padding: 10px;
}
.container3 {
position: absolute;
margin: auto;
border: 3px solid green;
text-align: center;
left: 900px;
top: 25%;
padding: 10px;
}
.div1 {
margin: auto;
border: 3px solid green;
text-align: center;
left: 100px;
top: 25%;
padding: 10px;
}
.div2 {
margin: auto;
border: 3px solid green;
text-align: center;
left: 100px;
top: 25%;
padding: 10px;
}
.div3 {
margin: auto;
border: 3px solid green;
text-align: center;
left: 100px;
top: 25%;
padding: 10px;
}
</style>
<body>
<!-- container divs and div1 div2 div3 with buttons -->
<!-- first div --------------------------------------------------->
<div class="container1">
<button>reload color php</button><br>
<div class="div1">
<h2>div1</h2>
</div>
</div>
<!-- second div --------------------------------------------------->
<div class="container2">
<button>reload color php</button><br>
<div class="div2">
<h2>div2</h2>
</div>
</div>
<!-- third div --------------------------------------------------->
<div class="container3">
<button>reload color php</button><br>
<div class="div3">
<h2>div3</h2>
</div>
</div>
</body>
</html>
The problem that you are having is you are adding more than one click handler to button, not a specific button but ALL of them.
You can use a single event handler that simply gets the parent div of the button that was clicked, then finds the div as a child that will hold the content and use that as the target.
Another problem that you are having is the files that you are loading via ajax actually include FULL html/body tags but they shouldn't they should just the HTML elements only (or JSON but for my example I'm using HTML).
$(document).ready(function(){
$("button").click(function(){
target = $(this).parent("div").find("div");
$.ajax({url: "colors.php", success: function(result){
target.html(result);
}});
});
});
css
.color-div{
width:50px;
height:50px;
}
for your color files just include the div with the background color and a class that gives the div size.
<div class='color-div' style='background-color:#FF0000'></div>
I am trying to hide #showMyList, #showMyName these divs. On click button need to show divs.
Both div has separate buttons. I want to see one div at a time. I can give different css (style)to them so that they will look different.
Which one will be more useful jQuery hide() and show()
Or display none and block?
#showMyList, #showMyName{
height: 100px;
width: 500px;
text-align: center;
border: 1px solid gray;
background-color: antiquewhite;
position: absolute;
top: 200px;
left:200px;
}
</style>
<script>
$('document').ready(function(){
$('showMyList').css("display", "none");
$('showMyAcc').css("display","none");
$("myList").click(function(){
$("showMyList").css("display", "block");
$("myAcc").click(function(){
$("showMyAcc").css("display", "block");
});
});
});
Consider the following example.
$(function() {
$('#showMyList, #showMyAcc').hide();
$("#myList").click(function() {
$("#showMyAcc").hide();
$("#showMyList").show();
});
$("#myAcc").click(function() {
$("#showMyList").hide();
$("#showMyAcc").show();
});
});
#showMyList,
#showMyAcc {
height: 100px;
width: 500px;
text-align: center;
border: 1px solid gray;
background-color: antiquewhite;
position: absolute;
top: 200px;
left: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="myList">Show List</button>
<button id="myAcc">Show Name</button>
<div id="showMyList">List</div>
<div id="showMyAcc">Name</div>
You can Hide both elements and then reveal or show 1 at a time.
I must to activate hover on an svg based element map.
So I got the map that can change color of a region hovering in selected region. Near this map I got a list of regions as link that must to highlight the relative region on the map hovering on that link.
Example Fiddle
https://jsfiddle.net/fgsh896b/
I got something like this:
Example
function mouseEnt(id) {
$('#' + id).trigger('hover');
}
.item {
width:100px;
height: 100px;
border: 1px solid #000;
position: relative;
margin-left: 10px;
float: left;
}
.item:hover {
background-color: #000;
}
#link {
top: 150px;
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="1" class="item">
Item 1
</div>
<div id="2" class="item">
Item 2
</div>
<div id="link">
Link1
Link2
</div>
My function is wrong, I've tried with others jquery functions but maybe my logic is incorrect. how to reach this?
As #j08691 linked to in the comments on your question, you cannot cause a CSS :hover pseudo selector to fire by faking an event in JS.
However what you can do is set a class on the target element manually when you hover over the required link. To improve the logic you can use a data attribute to link them together and use an unobtrusive event handler, something like this:
$(function() {
$('#link a').hover(function() {
$('#' + $(this).data('rel')).toggleClass('hover');
});
});
.item {
width: 100px;
height: 100px;
border: 1px solid #000;
position: relative;
margin-left: 10px;
float: left;
}
.item:hover,
.item.hover {
background-color: #000;
}
#link {
top: 150px;
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="1" class="item">Item 1</div>
<div id="2" class="item">Item 2</div>
<div id="link">
Link1
Link2
</div>
I am preparing a simple javascript exercise to teach college-level students in graphic design how to make things interactive on the web.
I am new to javascript as well, and I have written a simple script that shows a modal box when you click a button. The problem is, I would have to make a new function for every single button on my page. Is there a way to have one function? Below is the code I have so far.
I have also made a jsfiddle but the modal isn't popping up. It works on my computer. I've also uploaded my code to my website.
<!doctype>
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
background-color: rgba(220, 220, 220, 1);
}
#mainContent {
width: 960px;
height: 680px;
margin: 80px auto 0 auto;
background-image: url(home.png);
border: 1px solid gray;
border-radius: 8px;
background-color: white;
}
#button1 {
position: relative;
top: 250px;
left: 500px;
width: 40px;
}
#closeButton {
position: absolute;
top: -20px;
right: -20px;
width: 40px;
}
#infoBox.one {
position: relative;
top: 250px;
left: 530px;
visibility: hidden;
width: 300px;
margin: 0;
background-color: white;
border: 1px solid black;
padding: 15px;
text-align: center;
border-radius: 8px;
}
</style>
<script>
function infoBox() {
button = document.getElementById("infoBox");
button.style.visibility = (button.style.visibility == "visible") ? "hidden" : "visible";
}
</script>
</head>
<body>
<div id="mainContent">
<a href='#' onclick='infoBox()'>
<img id="button1" src="button.png" />
</a>
<div id="infoBox" class="one">
<p>Your information goes here.</p>
<a href='#' onclick='infoBox()'>
<img id="closeButton" src="close.png" />
</a>
</div>
</div>
</body>
</html>
The simple approach you can try is to make use of the fact that click events bubble up the DOM tree (event delegation). So using this idea you can bind one event handler to parent container (for example body) and handle all clicks from there:
document.body.addEventListener('click', function(e) {
if (e.target.parentNode.className === 'btn-modal') {
infoBox();
}
}, false);
Note: I'm checking parentNode's class because click happens on the image element, which is child of the link with .btn-modal. Here is the version of the generic way to handle delegated events without relying on parent nodes being what we know: http://jsfiddle.net/4w37mkse/2/ if you are interested.
In above case I denote the buttons that we want our listener to handle with specific class:
<a href='#' class="btn-modal">
<img id="button1" src="http://www.jordankennedy.com/example/button.png"/>
</a>
This is very naive and basic example but it demonstrates the idea.
Demo: http://jsfiddle.net/4w37mkse/1/