How to restrict drag (disable) in the block?
Full example
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
var x = 0, setElementMove = 0, getElementMove = $('#drag');
getElementMove.mousedown(function(event){
x = event.clientX+$(document.body).position().left-parseInt($(this).css('left'));
setElementMove = true;
if(typeof event.preventDefault != 'undefined'){
event.preventDefault();
return false;
}
});
getElementMove.ondragstart = function(){
return false;
};
$(document).mouseup(function(){
setElementMove = false;
});
$(document).mousemove(function(event){
if(setElementMove){
getElementMove.css('left', event.clientX+$(document.body).position().left-x + 'px');
}
});
});
</script>
<h1>How to restrict drag (disable) in the block?</h1>
<div id="block">
<div id="border">
<div id="drag" style="left:200px;">some text</div>
</div>
</div>
<style type='text/css'>
h1, #drag {
font: bold 1.0em arial, helvetica, tahoma, verdana, sans-serif;
margin: 10px 0px;
text-align: center;
}
#block {
border: 1px solid #DDD;
overflow: hidden;
width: 100%;
}
#border {
border: 1px solid red;
margin: 0px auto;
overflow: hidden;
width: 70%; /*important*/
height: 150px;
}
#drag {
background: #DDD;
cursor: default;
position: absolute;
top: 50px;
width: 54px;
height: 45px;
}
</style>
edit your mousemove like this,
$(document).mousemove(function(event) {
var eleft = event.clientX + $(document.body).position().left - x;
if (eleft > boundary.offset().left && (eleft + getElementMove.width() < boundary.offset().left + boundary.width() ) ) {
if (setElementMove) {
getElementMove.css('left', eleft + 'px');
}
}
});
crazy demo
Since you asked for jQuery (altough you are using Mootools in your example), have a look at jQuery Ui Draggable. They have IMO the best drag & drop utility you can have with jQuery.
Related
So I have a pop up that originally showed on every webpage. After some modification to include the use of cookies to stop the webpage loading every single session, the pop up no longer shows. I can't figure out why and after extensive testing, research and just straight up asking for help I've concluded I do not have enough of an understanding on the subject.
If anyone is able to help me understand why its not working and help with a solution.
<div id='popup' style="display:none">
<div class='cnt223'>
<h1>Important Notice</h1>
<p>
Test!
<br />
<br />
OK
KO
</p>
</div>
</div>
<script>
function setCookie(cname, cvalue) {
window.document.cookie = cname + "=" + cvalue;
}
function getCookie(cname) {
var ca = decodeURIComponent(document.cookie).split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i].trim().split('=');
if (cname == c[0] && c.length > 1) {
return c[1];
}
}
return "";
}
function checkCookie() {
if (getCookie("ageverification") == "") {
$('#popup').show();
$('#popup a.close').click(function ( event ) {
event.preventDefault();
$('#popup').hide();
setCookie("ageverification", 'true');
});
$('#popup a.goBack').click(function ( event ) {
event.preventDefault();
goBack();
});
} else {
return null;
}
}
function goBack() {
window.history.go(-2);
}
checkCookie();
CSS "This is just on the same HTML page for now"
<style type="text/css">
#overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
z-index: 100;
display: none;
}
.cnt223 a{
text-decoration: none;
}
.popup{
width: 100%;
margin: 0 auto;
display: none;
position: fixed;
z-index: 101;
}
.cnt223{
min-width: 600px;
width: 600px;
min-height: 150px;
margin: 100px auto;
background: #f3f3f3;
position: relative;
z-index: 103;
padding: 15px 35px;
border-radius: 5px;
box-shadow: 0 2px 5px #000;
}
.cnt223 p{
clear: both;
color: #555555;
/* text-align: justify; */
font-size: 20px;
font-family: sans-serif;
}
.cnt223 p a{
color: #d91900;
font-weight: bold;
}
.cnt223 .x{
float: right;
height: 35px;
left: 22px;
position: relative;
top: -25px;
width: 34px;
}
.cnt223 .x:hover{
cursor: pointer;
}
</style>
Is the element with id "popup" nested within (a child of) the element with id "overlay" ? If it is, the element with id "overlay" has got display:none; , meaning the popup might be displaying, but it's parent is not. Try replacing:
$('#popup').show();
with:
$('#popup, #overlay').show();
Another problem could be that the Javascript is executed before the browser added the element with id "popup" to it's DOM. Try replacing:
checkCookie();
with:
$(function () { checkCookie(); });
I've decided to try and make a Notes program as a learning experience. The point was to problem-solve on my own, but I'm pretty clueless as to why this won't work.
When I Shift + Double Click a note to rename it the note changes from a <div> to <input>, but the CSS stays the same. When I press enter (which submits the input) the changes back to <div>, and the CSS is there, but it is very small and doesn't take the shape of the text. Any idea why? Thanks!
Code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<button class="newList" onclick="newNote()">Create a new note</button>
<br></br>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
function clickNote(){
if(event.shiftKey){
$( "div" ).click(function() {
$( this ).replaceWith( "<tr><td><form'><input class='rename' placeholder='Type here' onkeydown='enter(event)' id='newListName' autofocus>" + "</input></form></td></tr>" );
});
} else {
location.href='list.html';
}
}
function enter(event){
var enter = event.which;
if (enter == 13){
var input = document.getElementById("newListName");
$( "input" ).keyup(function() {
$( this ).replaceWith( "<tr><td><div class='list' id='list' onclick='clickNote()'>" + input.value + "</div></td></tr>" );
});
}
}
function newNote(){
var newNt = document.createElement("DIV");
var text = "Rename with Shift + Double Click"
newNt.textContent = text;
newNt.setAttribute('class', 'list');
newNt.setAttribute('id', 'list');
newNt.setAttribute("onclick", "clickNote()");
document.body.appendChild(newNt);
}
</script>
</body>
</html>
CSS:
:root {
--main-color: #FFE033;
--secondary-color: #FEC82A;
}
.newList {
height: inherit;
width: 10%;
padding: .4%;
position: relative;
border-bottom: 4px solid var(--secondary-color);
background: var(--main-color);
}
.list {
height: inherit;
width: 10%;
padding: .4%;
position: relative;
border-bottom: 4px solid var(--secondary-color);
background: var(--main-color);
}
.rename {
height: 2.5em;
width: 116%;
padding: .4%;
position: relative;
border-bottom: 4px solid var(--secondary-color);
background: var(--main-color);
}
#list {
cursor: pointer;
}
Am not sure why you are doing this, but you are adding td tr around the div which make it insde a table and create this issue as the width is defined with 10%. Remove it and it should work fine. You need also to correct the input tag.
function clickNote() {
if (event.shiftKey) {
$("div").click(function() {
$(this).replaceWith("<input class='rename' placeholder='Type here' onkeydown='enter(event)' id='newListName' autofocus>");
});
} else {
location.href = 'list.html';
}
}
function enter(event) {
var enter = event.which;
if (enter == 13) {
var input = document.getElementById("newListName");
$("input").keyup(function() {
$(this).replaceWith("<div class='list' id='list' onclick='clickNote()'>" + input.value + "</div>");
});
}
}
function newNote() {
var newNt = document.createElement("DIV");
var text = "Rename with Shift + Double Click"
newNt.textContent = text;
newNt.setAttribute('class', 'list');
newNt.setAttribute('id', 'list');
newNt.setAttribute("onclick", "clickNote()");
document.body.appendChild(newNt);
}
:root {
--main-color: #FFE033;
--secondary-color: #FEC82A;
}
.newList {
height: inherit;
width: 10%;
padding: .4%;
position: relative;
border-bottom: 4px solid var(--secondary-color);
background: var(--main-color);
}
.list {
height: inherit;
width: 10%;
padding: .4%;
position: relative;
border-bottom: 4px solid var(--secondary-color);
background: var(--main-color);
}
.rename {
height: 2.5em;
width: 100%;
padding: .4%;
position: relative;
border-bottom: 4px solid var(--secondary-color);
background: var(--main-color);
}
#list {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="newList" onclick="newNote()">Create a new note</button>
I'm trying to find a way to transition from one background image to another when I hover a div.
Here's a demo:
codepen demo
Here's my code
$('#cat').hover(function(){
$('.image').css('background-image',
"url('https://images.unsplash.com/photo-1485198963969-3f6b12e49abb')");
});
Any ideas?
First, you are missing IDs for your <h1>, because your JQuery select elements with ID cat, dog and rabbit.
seccond, what you should change is background of '.bg' class, not '.image' class
HTML
<h1 id="cat">CAT</h1>
<h1 id="dog">DOG</h1>
<h1 id="rabbit">RABBIT</h1>
JS
$('#cat').hover(function(){
$('.bg').css('background-image', "url('https://images.unsplash.com/photo-1485198963969-3f6b12e49abb')");
});
$('#dog').hover(function(){
$('.bg').css('background-image', "url('https://images.unsplash.com/photo-1469225208447-8329cbd3cb3a')");
});
$('#rabbit').hover(function(){
$('.bg').css('background-image', "url('https://images.unsplash.com/photo-1478754351612-f8b7577a3859')");
});
demo : https://jsfiddle.net/z2hevmya/
var images = {
"cat":'https://images.unsplash.com/photo-1485198963969-3f6b12e49abb',
"dog" : 'https://images.unsplash.com/photo-1469225208447-8329cbd3cb3a',
"rabbit" : 'https://images.unsplash.com/photo-1478754351612-f8b7577a3859'
};
$('.menu').hover(function(){
var img = $(this).attr("id");
$('.bg').css('background-image', "url(" + images[img] + ")");
});
body {
margin: 0;
padding: 0;
}
h1 {
z-index: 100;
color: #456;
font-family: sans-serif;
position: relative;
opacity: .5;
transition: all ease 1s;
cursor: pointer;
height: 1em;
padding: .5em;
margin: 0;
}
h1:hover {
opacity: 1;
}
.bg {
position: fixed;
height: 100%;
width: 100%;
background: url('https://images.unsplash.com/photo-1485198963969-3f6b12e49abb') no-repeat center;
background-size: cover;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="bg"></div>
<h1 id="cat" class="menu">CAT</h1>
<h1 id="dog" class="menu">DOG</h1>
<h1 id="rabbit" class="menu">RABBIT</h1>
<script language="javascript">
$(function () {
$('.mDiv').hover(function () {
$(this).addClass('divHover');
}, function () {
$(this).removeClass('divHover');
}
);
});
</script>
<style type="text/css">
.mDiv {
height: 300px;
width: 200px;
background: darkgrey;
border: solid 1px #ccc;
float: left;
margin-right: 10px;
}
.divHover{
// background-image: you " img url";
background: greenyellow;
}
</style>
<div id="d">
<div class="mDiv">Test</div>
</div>
I've been searching a lot on the site and the web but can't really seem to find any help. My problem is that I need to make a function that creates a new div box on the press of a button and that div box needs to be draggable and editable.
function makeNote(e) {
// Check the event object if the .click is on the canvas
// or a created note
if (e.eventPhase === 2) {
// Create the new comment at the corsor postition
var $newbox = $('<div class="ui-widget-content" id="newbox" style="top:' + e.pageY + 'px; left: ' + e.pageX + 'px;"><span id="close">Delete comment</span><p>Your comment:</p><textarea></textarea></div>');
$('#canvas').append($newbox);
$newbox.draggable();
}
}
function deleteNote() {
$(this).parent('#newbox').remove();
}
// wait until the dom document is loaded
jQuery(document).ready(function () {
// listen for a .click() event on the canvas element
$('#canvas').click(function (e) {
makeNote(e);
});
// Remove the note
$("#close").click(function () {
deleteNote();
});
});
html, body {
background-color: #cccccc;
margin: 0;
padding: 0;
height: 100%;
position: relative;
}
#newbox {
position: absolute;
background-color: white;
height: 200px;
width: 200px;
box-shadow: 10px 10px 10px #888;
padding: 20px;
z-index: 1000;
}
textarea {
background: transparent;
width: 200px;
height: 180px;
border: 0;
}
#canvas {
height:auto !important;
min-height: 100%;
height:100%;
z-index: -1000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" scr="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="JavaScript.js"></script>
<link rel="stylesheet" ahref="StyleSheet1.css" />
</head>
<body>
<div id="canvas">
</div>
</body>
</html>
draggable is a part of jquery-ui library. Not jquery.
Add <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> to your code.
function makeNote(e) {
// Check the event object if the .click is on the canvas
// or a created note
if (e.eventPhase === 2) {
// Create the new comment at the corsor postition
var $newbox = $('<div class="ui-widget-content" id="newbox" style="top:' + e.pageY + 'px; left: ' + e.pageX + 'px;"><span id="close">Delete comment</span><p>Your comment:</p><textarea></textarea></div>');
$('#canvas').append($newbox);
$newbox.draggable();
}
}
function deleteNote() {
$(this).parent('#newbox').remove();
}
// wait until the dom document is loaded
jQuery(document).ready(function () {
// listen for a .click() event on the canvas element
$('#canvas').click(function (e) {
makeNote(e);
});
// Remove the note
$("#close").click(function () {
deleteNote();
});
});
html, body {
background-color: #cccccc;
margin: 0;
padding: 0;
height: 100%;
position: relative;
}
#newbox {
position: absolute;
background-color: white;
height: 200px;
width: 200px;
box-shadow: 10px 10px 10px #888;
padding: 20px;
z-index: 1000;
}
textarea {
background: transparent;
width: 200px;
height: 180px;
border: 0;
}
#canvas {
height:auto !important;
min-height: 100%;
height:100%;
z-index: -1000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="JavaScript.js"></script>
<link rel="stylesheet" ahref="StyleSheet1.css" />
</head>
<body>
<div id="canvas">
</div>
</body>
</html>
Since you use jQuery, you can use .draggable() from jQuery UI along with contenteditable="true":
function addNew() {
var field = $('<div contenteditable="true">Text</div>')
field.appendTo('#fields').draggable();
}
#fields div {
border: 1px dashed #ddd;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<button onClick="addNew()">Add new field</button>
<hr/>
<div id="fields"></div>
There is something I want to notice.
never use same id to elements.
use jquery .on function for element that make by scripts.
never use box-shadow :D
function makeNote(e) {
// Check the event object if the .click is on the canvas
// or a created note
if (e.eventPhase === 2) {
// Create the new comment at the corsor postition
var $newbox = $('<div class="ui-widget-content" id="newbox'+e.pageX+e.pageY+'"><span class="close">Delete comment</span><p>Your comment:</p><textarea></textarea></div>');
$('#canvas').append($newbox);
$($newbox).css({
'top' : ($('#canvas').height() / 2 - 150 + sequentCounter++) + 'px' ,
'left' : ($('#canvas').width() / 2 - 100 + rowSeqCounter + sequentCounter++) + 'px'
});
$newbox.draggable({cancel : '.close'});
}
}
var sequentCounter = 1;
var rowSeqCounter = 1;
// wait until the dom document is loaded
jQuery(document).ready(function () {
// listen for a .click() event on the canvas element
$('#div_element_maker').click(function (e) {
if (sequentCounter > 70){
sequentCounter = 1;
rowSeqCounter += 11;
if (rowSeqCounter > 50)
rowSeqCounter = 1;
}
makeNote(e);
});
// Remove the note
$('#canvas').on('click',".close", function () {
$(this).parent().remove()
});
});
html, body {
background-color: #cccccc;
margin: 0;
padding: 0;
height: 100%;
position: relative;
}
.ui-widget-content {
position: absolute;
background-color: white;
height: 180px;
width: 185px;
border: 1px solid darkgray;
/*box-shadow: 10px 10px 10px #888;*/
padding: 20px;
z-index: 1000;
}
textarea {
background: transparent;
width: 180px;
height: 100px;
border: 1px solid darkgray;
}
#canvas {
height:auto !important;
min-height: 100%;
height:100%;
z-index: -1000;
}
.close{
cursor: pointer;
background: red;
}
#div_element_maker{
cursor: pointer;
background: green;
padding: 10px;
margin: 10px;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" scr="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="JavaScript.js"></script>
<link rel="stylesheet" ahref="StyleSheet1.css" />
</head>
<body>
<div id="canvas">
<span id="div_element_maker">make element</span>
</div>
</body>
</html>
I'm trying to create an animated menu that slides up and down. Unfortunately it's not working. I've checked the error console and there are no syntax errors. Here's my Javascript:
function showLayer() {
var hiddenLayer = document.getElementById("mainmenu");
var layerPosition = parseInt(hiddenLayer.style.bottom);
if (layerPosition > 700) {
hiddenLayer.style.bottom = (layerPosition + 5) + "px";
setTimeout("showLayer()", 20);
}
}
function hideLayer() {
var hiddenLayer = document.getElementByID("mainmenu");
hiddenLayer.style.bottom = "700px";
}
Here's the whole context:
<script type="text/javascript">
function showLayer() {
var hiddenLayer = document.getElementById("mainmenu");
var layerPosition = parseInt(hiddenLayer.style.bottom);
if (layerPosition > 700) {
hiddenLayer.style.bottom = (layerPosition + 5) + "px";
setTimeout("showLayer()", 20);
}
}
function hideLayer() {
var hiddenLayer = document.getElementByID("mainmenu");
hiddenLayer.style.bottom = "700px";
}
</script>
<style type="text/css">
div#mainmenu { position: absolute; bottom: 700px; left: 9px; width: 600px;
height: 350px; border-style: solid; background-color: rgb(0, 0, 0) ; border-
width: 3px; border-top-right-radius: 7px; border-top-left-radius: 7px; }
div#mainbutton { position: absolute; top: 674px; left: 12px; width: 28px;
height: 28px; border-style: solid; border-color: rgb(255, 255, 255); border-width:
1px; border-radius: 4px; }
div#mainbuttontext { position: absolute; top: 679px; left: 22px; color: rgb(255, 255,
255); font-style: normal; font-size: 18px; font-family:"Arial"; }
</style>
<div id="mainbutton"></div>
<div id="mainmenu" onClick="showLayer('mainmenu')"> </div>
<div id="mainbuttontext">F</div>
</body>
I think I found your problem! It's something very strange and I can't explain it, but to get style in javascript, the css must be inline (to set a style it's not necessary).
So I modified your code by placing the css inline.
HTML :
<div id="mainmenu" style="position:absolute;bottom:100px;" onclick="showLayer('mainmenu');">Click me!</div>
<!--I wrote 100px just for the test, you can change it and modify the js-->
JS :
function showLayer()
{
var hiddenLayer=document.getElementById("mainmenu");
var layerPosition=parseInt(hiddenLayer.style.bottom);
if(layerPosition>50)
{
hiddenLayer.style.bottom=(layerPosition+5)+"px";
setTimeout("showLayer()",20);
}
}
function hideLayer()
{
var hiddenLayer=document.getElementById("mainmenu");
hiddenLayer.style.bottom="700px";
}
Fiddle : http://jsfiddle.net/8MWfV/
And here is a fiddle that shows that a not inline css doesn't works : http://jsfiddle.net/kfUrP/