Referring various sources, I've written a code to minimize and maximize a div tag in my JSP code which goes as follows,
<style type="text/css" media="screen" > #editor {
position: absolute;
top: 0;
right: 20%;
bottom: 0;
left: 0;
}
#widnow {
position: absolute;
top: 72.5%;
right: 0;
bottom: 0;
left: 0;
width: auto;
border: solid 1px;
}
#title_bar {
background: #FEFEFE;
height: 25px;
width: 100%;
}
#button {
border: solid 1px;
width: 25px;
height: 23px;
float: right;
cursor: pointer;
}
#box {
height: 250px;
background: #DFDFDF;
}
</style >
=============================
<div id="widnow">
<div id="title_bar">
<div id="button">-</div>
</div>
<div id="box">
</div>
</div>
============================
<script type="text/javascript">
$("#button").click(function(){
if($(this).html() == "-"){
$(this).html("+");
}
else{
$(this).html("-");
}
$("#box").slideToggle();
});
</script>
This gives me a div tag something like this,
But when I click the minimize button (i.e - on the top right) nothing happens.
The code works fine as shown in this demo but does not work in my jsp.
what to do? where is my mistake?
Did you Check for JavaScript conflicts? I had such issues before.
Removed
<script src="js/jquery.autocomplete.js"></script>
from head in JSP and added
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
This worked fine.
Related
I'm trying to make a kind of window which pops up when a customer add a product to his/her cart. This is what it would look like : Red and green divs are the background. There is a div which makes it darker (#overlay-daddy), and the white div is its child (#overlay).
Using JS I added an event listener on #overlay-daddy which (is supposed to) set its display property to none. My problem is it also triggers an event when I click on #overlay. Thanks in advance !
Here's my code :
#overlay-daddy {
position: absolute;
z-index: 1;
background-color: rgba(0, 0, 0, 0.6);
width: 100%;
height: 100%;
top: 0;
left: 0;
}
#overlay {
position: absolute;
z-index: 2;
top: 30%;
left: 20%;
width: 60%;
height: 40%;
background-color: #fff;
}
<html lang="fr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="/css/batiprox_common.css">
</head>
<body>
<div style="height: 50%; background-color: red"></div>
<div style="height: 50%; background-color: green"></div>
<div id="overlay-daddy">
<div id="overlay">
</div>
</div>
<script type="text/javascript">
var dad = document.getElementById('overlay-daddy');
//dad.addEventListener("click", function() { this.style.display = "none";});
dad.addEventListener("click", function() { alert(this); });
</script>
</body>
</html>
You need to stop the event from being propagated. Just add e.eventPropagation() in the event listener for overlay.
var dad = document.getElementById('overlay-daddy');
var overlay = document.getElementById('overlay');
overlay.addEventListener("click", function(e) {
e.stopPropagation();
});
dad.addEventListener("click", function() {
alert(this);
});
#overlay-daddy {
position: absolute;
z-index: 1;
background-color: rgba(0, 0, 0, 0.6);
width: 100%;
height: 100%;
top: 0;
left: 0;
}
#overlay {
position: absolute;
z-index: 2;
top: 30%;
left: 20%;
width: 60%;
height: 40%;
background-color: #fff;
}
<div style="height: 50%; background-color: red"></div>
<div style="height: 50%; background-color: green"></div>
<div id="overlay-daddy">
<div id="overlay">
</div>
</div>
Also register a click handler on #overlay where you preventDefault();
Off the top of my head, that could look like this:
document.getElementById('overlay').addEventListener('click', function(e) {
e.preventDefault();
e.cancelBubble();
e.stopPropagation();
}, true);
Note that you probably don't need all three calls but it's been a while and my memory isn't clear on which you really need.
In order to disable the click event in the overlay's children, you need to test if the clicked element is the overlay itself, and not one of its children, with if(event.target===this) :
#overlay-daddy {
position: absolute;
z-index: 1;
background-color: rgba(0, 0, 0, 0.6);
width: 100%;
height: 100%;
top: 0;
left: 0;
}
#overlay {
position: absolute;
z-index: 2;
top: 30%;
left: 20%;
width: 60%;
height: 40%;
background-color: #fff;
}
<html lang="fr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="/css/batiprox_common.css">
</head>
<body>
<div style="height: 50%; background-color: red"></div>
<div style="height: 50%; background-color: green"></div>
<div id="overlay-daddy">
<div id="overlay">
</div>
</div>
<script type="text/javascript">
var dad = document.getElementById('overlay-daddy');
//dad.addEventListener("click", function() { this.style.display = "none";});
dad.addEventListener("click", function(event) {
if(event.target===this) alert(this);
});
</script>
</body>
</html>
The click event on your 'overlay' element is being propagated to its parent. You can add event.stopPropogation of your 'overlay' element.
You may modify your overlay element like below.
<div id="overlay" onclick="event.stopPropagation();">
</div>
I guess your code need bottom and right in #overlay-daddy
#overlay-daddy {
position: absolute;
z-index: 3; // edited
background-color: rgba(0, 0, 0, 0.6);
width: 100%;
height: 100%;
top: 0;
left: 0;
bottom: 0; // added bottom
right: 0; // added right
}
So if you want to click in #overlay-daddy you need to set z-index for it greater than #overlay
I hope it can help you.
Fiddle
Hello,
I found sticky sidebar jQuery script, but the fixed element (sidebar) floats to the left once I start scrolling down. I am trying to keep it on the right-hand side the whole time. Also, I am trying to get some spacing around sidebar once it starts scrolling, as now it's just stuck to the very top.
I trust it's a simple fix but JavaScript is like a dark forest to me, I tried to change couple things, tried to look online but can't seem to find the answers or I just don't know how to look for them so I apologise if this has been asked before.
$( document ).ready(function() {
console.log( "document ready!" );
var $sticky = $('.sticky');
var $stickyrStopper = $('.sticky-stopper');
if (!!$sticky.offset()) { // make sure ".sticky" element exists
var generalSidebarHeight = $sticky.innerHeight();
var stickyTop = $sticky.offset().top;
var stickOffset = 0;
var stickyStopperPosition = $stickyrStopper.offset().top;
var stopPoint = stickyStopperPosition - generalSidebarHeight - stickOffset;
var diff = stopPoint + stickOffset;
$(window).scroll(function(){ // scroll event
var windowTop = $(window).scrollTop(); // returns number
if (stopPoint < windowTop) {
$sticky.css({ position: 'absolute', top: diff });
} else if (stickyTop < windowTop+stickOffset) {
$sticky.css({ position: 'fixed', top: stickOffset });
} else {
$sticky.css({position: 'absolute', top: 'initial'});
}
});
}
});
.container {
width: 1000px;
float: left
}
.header {
clear: both;
margin-bottom: 10px;
border: 1px solid #000000;
height: 90px;
}
.sidebar {
float: right;
width: 350px;
border: 1px solid #000000;
}
.content {
float: right;
width: 640px;
border: 1px solid #000000;
height: 800px;
}
.footer {
clear: both;
margin-top: 10px;
border: 1px solid #000000;
height: 820px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="container">
<div class="header">
This is header
</div>
<div class="sidebar sticky">
This is side bar
</div>
<div class="content">
This is main content
</div>
<div class="footer">
<div class="sticky-stopper"></div>
This is my footer
</div>
</div>
I used the Sticky-Kit.js plugin. That worked for me. See below, it keeps your sidebar to the right the entire time and has the sticky effect you're after:
$(document).ready(function() {
console.log("document ready!");
$(".sidebar").stick_in_parent();
});
.container {
width: 1000px;
float: left
}
.header {
clear: both;
margin-bottom: 10px;
border: 1px solid #000000;
height: 90px;
}
.sidebar {
float: right;
width: 350px;
border: 1px solid #000000;
}
.content {
float: left;
width: 640px;
border: 1px solid #000000;
height: 800px;
}
.footer {
clear: both;
margin-top: 10px;
border: 1px solid #000000;
height: 820px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/leafo/sticky-kit/v1.1.2/jquery.sticky-kit.js"></script>
<div class="container">
<div class="header">
This is header
</div>
<div class="sidebar sticky">
This is side bar
</div>
<div class="content">
This is main content
</div>
<div class="footer">
<div class="sticky-stopper"></div>
This is my footer
</div>
</div>
You can use JQuery's css() method to apply css on scroll to the element to achieve the desired effect.
Change the JavaScript as follows:
if (stopPoint < windowTop) {
$sticky.css({ position: 'absolute', top: diff, right: '0px' });
} else if (stickyTop < windowTop+stickOffset) {
$sticky.css({ position: 'fixed', top: stickOffset, right: '0px' , margin: '10px 10px 0px 0px'});
} else {
$sticky.css({position: 'absolute', top: 'initial', right: "0px", margin: '0px'});
}
A css property of right:0px is applied to the element on scroll, since it's position becomes aboslute on scroll.
margin: 10px 10px 0px 0px was also applied to the element to provide additional spacing around it when scrolling. This is then sent to margin:0px when the scroll stops.
You will also need to adjust the css of the content css class, if you do not want your side bar sitting on top of the content area.
.content {
width: 550px;
border: 1px solid #000000;
height: 800px;
}
Here is an updated fiddle demonstrating these changes.
I have the following code for an image slider. It is a bit complicated because i want to use the slider code for multiple slider elements on the page. See below the code for one slider:
The problem i am having is described at the bottom.
$(document).ready(function(){
$('.vertical_img').first().addClass('display currentvertical_img').removeClass('invisable');
$('.horizontal_img').first().addClass('display currenthorizontal_img').removeClass('invisable');
$('.diagonal_img').first().addClass('display currentdiagonal_img').removeClass('invisable');
// image slider interaction with user
$('.right').click(function(){
next($(this).data('id'));
});
$('.left').click(function(){
previous($(this).data('id'));
});
});
function next(img_class){
var count;
$('.current'+img_class).animate({left: 0}, 500, function(){
console.log("animated?");
$('.current'+img_class).removeClass('display current'+img_class).addClass('invisable previous'+img_class);
if($('.previous'+img_class).is(':last-child')) {
count = $('.'+img_class).first().data('num');
$('.'+img_class).first().removeClass('invisable').addClass('display current'+img_class);
}
else{
$('.previous'+img_class).next().addClass('display current'+img_class).removeClass('invisable');
count = $('.previous'+img_class).next().data('num');
}
$('.'+img_class+'_slider').text(count+'/4');
$('.previous'+img_class).removeClass('previous'+img_class);
});
}
function previous(img_class){
var count;
$('.current'+img_class).removeClass('display current'+img_class).addClass('invisable previous'+img_class).animate({right: 0});
if ( $('.previous'+img_class).is(':first-child')) {
count = $('.'+img_class).last().data('num');
$('.'+img_class).last().removeClass('invisable').addClass('display current'+img_class);
}
else{
$('.previous'+img_class).prev().addClass('display current'+img_class).removeClass('invisable');
count = $('.previous'+img_class).prev().data('num');
}
$('.'+img_class+'_slider').text(count+'/4');
$('.previous'+img_class).removeClass('previous'+img_class);
}
.main_image_slide_container{
position: fixed;
left: 50px;
right:50px;
width: 500px;
height: 500px;
}
.image_slide_container_all_text_wrapper{
width: 100%;
height: auto;
overflow: overlay;
}
.image_slider_title{
float: left;
}
.image_slider_counter{
float: right;
}
.main_image_slide_container .image_slider_counter{
display: none;
}
.image_slide_container_all_text_wrapper .image_slider_counter{
display: block;
}
.slider_images_wrapper_window{
width: 100%;
height: auto;
position: relative;
}
.image_slider_controls{
position: absolute;
z-index: 10;
width: 50%;
height: 100%;
}
.left{
left: 0;
cursor: default;
}
.left:hover{
cursor: url(../../data/cursor_left.png) 40 30, move;
}
.right{
right: 0;
cursor: default;
}
.right:hover{
cursor: url(../../data/cursor_right.png) 40 30, move;
}
.slider_images_container{
width: 100%;
height: auto;
}
.slider_images_container img{
position: relative;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main_image_slide_container">
<div class="image_slide_container_all_text_wrapper">
<div class="image_slider_title big_text font">Gravient Vertical</div>
<div class="image_slider_counter big_text font vertical_img_slider">1/4</div>
</div>
<div class="slider_images_wrapper_window">
<div class="image_slider_controls left" data-id="vertical_img"></div>
<div class="image_slider_controls right" data-id="vertical_img"></div>
<div class="slider_images_container">
<img class="vertical_img invisable" data-num="1" src="https://www.geeky-gadgets.com/wp-content/uploads/2010/06/google-mac-linux1.jpg">
<img class="vertical_img invisable" data-num="2" src="https://images.techhive.com/images/idge/imported/article/ctw/2012/10/19/samsung_chromebook_338-100391696-orig.jpg">
</div>
</div>
<div class="image_slider_counter big_text font vertical_img_slider">1/4</div> <!--mobile counter -->
</div>
So my current problem is that the images are not animating to the left. And i dont know why.. I am pretty sure my animate syntax is correct. I copy pasted it from the jquery website.
All suggestions and tips are welcome.
If something is not clear please let me know so i can clarify it!
You have missed the invisable css. Here is the working Example.
jsfiddle
As mentioned above in the title I cannot get the onchange to call myfunction() everytime users type in the textarea, it supposed to change the image everytime it type
Anyone can please help on that, I am a newbie to html and javascript. I just need the image to change to what people have typed in the text area.
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:p="http://xmlns.jcp.org/jsf/passthrough" lang="us">
<head>
<meta charset="utf-8">
<title>〈Magnetic〉writesomething</title>
<link href="jquery-ui.css" rel="stylesheet">
<style>
body{
font: 62.5% "Trebuchet MS", sans-serif;
margin: 50px;
}
html, body {
height: 100%;
}
html {
display: table;
margin: auto;
}
body {
display: table-cell;
padding: .8em 2em .8em 20px;
}
.image {
position: relative;
width: 100%; /* for IE 6 */
}
h2 {
position: relative;
top: 80px;
left: 360px;
width: 200px;
height: 90px;
color:#FFFFFF;
font-size:36px;
margin: 0 auto;
}
h4 {
width: 600px;
}
img {
width: 100%;
height: auto;
z-index:-1;
}
div.relative {
position: relative;
left: 20px;
border: 3px solid #8AC007;
}
#container {
width:600px;
height:350px;
position: relative;
}
#image {
position: absolute;
left: 0;
top: 0;
width:100%;
height: auto;
}
#text {
z-index: 100;
position: absolute;
color: white;
font-size: 22px;
font-weight: bold;
left: 250px;
top: 80px;
}
</style>
</head>
<body>
<div id="fb-root"></div>
<div class="container">
<h1 class="container">〈Magnetic〉writesomething</h1>
<div style="display: block;">
<div id="imgDiv" class="image">
<img src="http://game.magnetic.hk/image.php?text=writesomething
" />
<p id="display"></p>
</div>
</div>
<p>Write something：</p>
<form action="image.php" method="post" name="myform">
<textarea style="width:600px;" name="text" id="inputtext" onChange="myFunction()" placeholder="上限為16個字">中秋祝你乜乜乜</textarea></br> </br>
</form>
</div>
<script src="jquery-1.8.3.js"></script>
<script type="text/javascript">
function myFunction() {
var x = document.getElementById("inputtext").value;
document.getElementById("display").innerHTML = x;
document.getElementById('imgDiv').innerHTML='<img src=\'http://game.magnetic.hk/image.php?text='+ document.getElementById("display").innerHTML +'\'>'
}
</script>
</body>
</html>
When you use document.getElementById('imgDiv').innerHTML you remove the <p id="display"></p>.
If you replace
document.getElementById('imgDiv').innerHTML='<img src=\'http://game.magnetic.hk/image.php?text='+ document.getElementById("display").innerHTML +'\'>'
by:
document.getElementById('imgDiv').innerHTML='<img src=\'http://game.magnetic.hk/image.php?text='+ document.getElementById("display").innerHTML +'\'><p id="display"></p>'
It should work.
You can try it here.
Replace your code line with this one. And check the last element after closing image tag. The same paragraph should be there.
document.getElementById('imgDiv').innerHTML = '<img src=\'http://game.magnetic.hk/image.php?text=' + document.getElementById("display").innerHTML + '\'><p id="display"></p>'
#Elie Gnrd's answer explains why your code is broken.
Since you are using jQuery put its selectors and binding to use.
Modify your script to this,
$('#inputtext').on('input', function () {
var x = $("#inputtext").val();
$("#display").html(x);
$('#imgDiv').html('<img src=\'http://game.magnetic.hk/image.php?text=' + x + '\'>');
});
And, remove the onChange attribute from textarea
Checkout the working fiddle here.. https://jsfiddle.net/sachin_puthran/h2c06fjx/
Since you mentioned every time a user types and I see that you are using jQuery.
Try like this.
--Update--
Didn't realize the text not appearing.
$("#inputtext").on("keydown", myFunction);
function myFunction() {
var x = $(this).val();
console.log(x);
$("#display").text(x);
$('#imgDiv > img').attr('src', 'http://game.magnetic.hk/image.php?text=' + x);
}
JSFiddle
--EDIT--
I have this Code in which there is only Two static div, So i want your kind help to generate new div automatically when new user come. Actually i am working with SignalR.
i need a more divs for new users, and each user have his own div. please provide any of CS or Jquery code help to solve it out. Thanks FOR your help :)
My index. Html
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
body, html {
margin: 0px;
padding: 0px;
}
#indicator {
width: 300px;
height: 20px;
background: lightgrey;
color: black;
position: absolute;
left: 500px;
top: 0px;
}
#myshape {
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
z-index: 100;
}
#yourshape {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
z-index: 1;
}
</style>
</head>
<body>
<script src="Scripts/jquery-1.6.4.js"></script>
<script src="Scripts/jquery-ui-1.10.3.js"></script>
<script src="Scripts/jquery.signalR-2.0.0.js"></script>
<script src="Scripts/jquery.signalR-2.0.0.min.js"></script>
<script src="/signalr/hubs"></script>
<script type="text/javascript">
$(function () {
$.connection.hub.start().done(function () {
$("#indicator").html("connected");
$("#myshape").draggable({
drag: function () {
var left = $("#myshape").offset().left;
var top = $("#myshape").offset().top;
$.connection.moveShapeHub.server.calculate(left, top);
}
});
});
$.connection.moveShapeHub.client.updateshape = function (left, top) {
$("#yourshape").offset({ "left": left, "top": top });
};
});
</script>
<div id="myshape"></div>
<div id="yourshape"></div>
<div id="indicator"></div>
</body>
</html>
Look at the jquery docs on using the append method. That sounds like all you need. http://api.jquery.com/append/