jQuery ,Css display none - block vs. hide- show - javascript

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.

Related

Ajax php reloading into divs example

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>

Only load iframe when mouseover

Hey i want want the iframe to only load when the mosue is hovering on it.
I only want it to laod when the mouse is over because i have many of them and the loading speed of the site is very bad.
Any ideas?
i already tried if with a hidden div around it but i dont like that option
$(".text").mouseover(function() {
$(this).children(".test").show();
}).mouseout(function() {
$(this).children(".test").hide();
});
.text {
color: #069;
cursor: pointer;
text-decoration: none;
}
.test {
display: none;
position: absolute;
border: 1px solid #000;
width: 400px;
height: 400px;
}
<span style="font-size:120%;"><b><a class="text"> 👁
<iframe class="test" src="https://www.google.de/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"></iframe>
</a></b></span>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Don't set the src of the iframe. Only set it when the user hovers for the first time.
In the below snippet you can see the page inside of iframe is not loaded initially until you hover over the eye.
I have intentionally commented display: none; so that you can observe that page is not loaded.
$(".text").mouseover(function() {
var src = $(this).children(".test").attr('src');
if(!src){
src = $(this).children(".test").attr('data-src');
$(this).children(".test").attr('src', src);
}
$(this).children(".test").show();
}).mouseout(function() {
$(this).children(".test").hide();
});
.text {
color: #069;
cursor: pointer;
text-decoration: none;
}
.test {
//display: none;
position: absolute;
border: 1px solid #000;
width: 400px;
height: 400px;
}
<span style="font-size:120%;"><b><a class="text"> 👁
<iframe class="test" data-src="https://www.google.de/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"></iframe>
</a></b></span>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Page is not taking full size of div

I'm making a dashboard page for posting articles for my website.
i have a sidebar and a section where my posting page will appear but that page is not taking up the full size of section...
here is the screenshot of my problem https://ibb.co/kuZBQm
.container {
width: 100%;
height: auto;
}
aside {
float: left;
width: 200px;
height: 500px;
border: 1px solid;
}
section {
width: 100%;
height: 500px;
border: 1px solid red;
}
<div class=" container">
<aside>
<button> Top Games</button>
</aside>
<section id="section"></section>
</div>
<script>
function load_topgamespost() {
document.getElementById("section").innerHTML = '<object type="text/html" data="/topgames/topgamespost"></object>';
}
</script>
So your section is the correct size, the problem is with the object element inside it.
Use
section object{
width:100%;
height:100%;
}
body{
height: 100vh;
padding: 0;
margin: 0;
}
try this style in your body tag i think this suits in your problem

JQuery hide multiple div of similar id when clicked outside

I want to hide all the div with similar id if not clicked on any of those div's. In my code it is working only for the first div since I have use index[0] to fetch the id. I want to generalize it to work for all the id.
Here is the code:
$(window).click(function(e) {
if (e.target.id != $('[id^=div_]')[0].id) {
$('[id^=div_]').hide();
}
});
div {
height: 150px;
width: 150px;
display: inline-block;
background: green;
margin: 10px;
color: #fff;
text-align: center;
line-height: 150px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="div_1">One</div>
<div id="div_2">Two</div>
<div id="div_3">Three</div>
<div id="div_4">Four</div>
FIDDLE
The simple solution here is to use a common class on all the elements. You can then use is() to determine if e.target was one of those elements and hide/show them as needed. Try this:
$(window).click(function(e) {
if (!$(e.target).is('.div')) {
$('.div').hide();
}
});
div {
height: 150px;
width: 150px;
display: inline-block;
background: green;
margin: 10px;
color: #fff;
text-align: center;
line-height: 150px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="div_1" class="div">One</div>
<div id="div_2" class="div">Two</div>
<div id="div_3" class="div">Three</div>
<div id="div_4" class="div">Four</div>
I cannot make any changes in HTML like adding classes
In that case you can check the id of the clicked element to see if it begins with div_. If not, then hide all the divs, something like this:
$(window).click(function(e) {
if (e.target.id.indexOf('div_') != 0) {
$('[id^=div_]').hide();
}
});
div {
height: 150px;
width: 150px;
display: inline-block;
background: green;
margin: 10px;
color: #fff;
text-align: center;
line-height: 150px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="div_1" class="div">One</div>
<div id="div_2" class="div">Two</div>
<div id="div_3" class="div">Three</div>
<div id="div_4" class="div">Four</div>
Hey you can use this function
if(e.target.id=="" || $('[id^=div_]').filter('#'+e.target.id).length==0){
$('[id^=div_]').hide();
}
filter function will filter the selected div in list of div whoes id starts with div
$(window).click(function(e) {
if(e.target.id=="" || $('[id^=div_]').filter('#'+e.target.id).length==0){
$('[id^=div_]').hide();
}
});
div {
height: 150px;
width: 150px;
display: inline-block;
background: green;
margin: 10px;
color: #fff;
text-align: center;
line-height: 150px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="div_1">One</div>
<div id="div_2">Two</div>
<div id="div_3">Three</div>
<div id="div_4">Four</div>

Jquery Animate effect to move div

I would like to be able to add an animation to this simple query for when the div is transitioned to its new position.
<div class="container">
<div class="left-side-bar">
<div class="long blue" id="1">
1
</div>
<div class="short red" id="2">
2
</div>
</div>
<div class='middle-side-bar'>
<div class='long green' id="3">
3
</div>
</div>
<div class='right-side-bar'>
<div class='short yellow' id="4">
4
</div>
</div>
</div>
the CSS
.left-side-bar{
clear: both;
width: 32%;
text-align: center;
float: left;
margin-top: 1%;
margin-bottom: 100px;
}
.middle-side-bar{
width: 32%;
text-align: center;
float: left;
margin: 1% 0 1% 1.6%;
}
.right-side-bar{
width: 32%;
text-align: center;
float: left;
margin: 1% 0 1% 1.6%;
}
.green {
background-color: green;
}
.long {
height: 300px;
}
.short {
height: 200px;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
.yellow {
background-color: yellow;
}
Basically I want the div to be moved to its new place as an animated transition, rather than have it simply appear.
here is the jsfiddle
DEMO
Unfortunately, the replaceWith method does not work with animate in jQuery. Instead, you will probably need to find an alternative method to your solution. Here's one that slowly transitions the red box on top of the yellow box... http://jsfiddle.net/aeyg89rd/4/
I added the following jQuery, note that I used offset() to get the left and top properties of the yellow box, then I moved the red box to those left and top positions using animate() :
$(document).ready(function () {
var num4 = $("#4").offset();
$("#2").animate({ top: num4.top, left: num4.left }, 1000);
});
And I changed some CSS attributes for .red class so that I can move it around with the jQuery code above. More specifically, I changed its position to absolute, and gave it a width dimension:
.red {
position: absolute;
top: 320px;
background-color: red;
width: 150px;
}

Categories