I'm trying to make a page where you can create "documents" that are divs with specific properties.
For now I thought about name & color.
First, when you click in the body, you can create a document that is called "something+i" (i is its ID) then, when you click a specific document you can access a menu to edit its color and its name.
finally when you close the menu by clicking OK the specific document is updated.
Do you have any idea on how to do that?
Thanks a lot for the help.
var i = 1;
$(function(){
$(document.body).click(function(e){
var div = $("<div />", { "class":"document", id:"document"+i })
.css({
"left": e.pageX + 'px',
"top": e.pageY + 'px'
})
.append($( "<p>document</p>")+i )
.appendTo(document.body);
$('.document').click(function(event){
event.stopPropagation();
});
$('.menu').click(function(event){
event.stopPropagation();
});
document.querySelector(".document").addEventListener("click", function(){
document.querySelector(".menu").style.display = "block";
});
document.querySelector(".validate").addEventListener("click", function(){
document.querySelector(".menu").style.display = "none";
});
i++;
});
});
body{
width: 100vw;
height: 100vh;
background: grey;
}
.document {
position: absolute;
transform: translate(-50%, -50%);
opacity: 1;
background-color: red;
resize:both;
overflow: auto;
filter: drop-shadow(0 0 0.2rem black);
}
.menu{display: none;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="menu">
<li><input type="text" id="name" name="name" size="10" placeholder="name"></li>
<li><input type="text" id="color" name="color" size="10" placeholder="color"></li>
<button class ="validate">OK</button>
</div>
</body>
When you click on document first check if there is any menu exist with the id which is clicked if there is show that menu else create new menu .You can use clone to create new menu and then add data-id to it and append them under some divs .
Then , when ok button is clicked simply use $(this).closest(".menu_copy").hide(); to hide the menu .
Demo Code :
var i = 1;
$(function() {
$(document.body).click(function(e) {
var subject = $(".menu_copy")
//check if target click doesn't have class document && not inside menu_copy
if ((!$(event.target).hasClass('document')) && (!subject.has(e.target).length)) {
var div = $("<div />", {
"class": "document",
id: "document" + i
})
.css({
"left": e.pageX + 'px',
"top": e.pageY + 'px'
})
.append($("<p>document</p>") + i)
.appendTo(document.body);
i++;
}
});
//onclick of document
$(document).on('click', '.document', function(event) {
event.stopPropagation();
var id = $(this).attr("id"); //get id
//check if there is any div with data-id
if ($("[data-id =" + id + " ]").length > 0) {
$("[data-id =" + id + " ]").show() //show it
} else {
//create new menu
var clone_menu = $(".menu_copy:first").clone();
$(clone_menu).attr("data-id", $(this).attr("id"))
$(clone_menu).css("display", "block")
$(clone_menu).appendTo(".docs"); //append inside docs
}
});
//if ok is clicked
$(document).on('click', '.validate', function(event) {
//get color and name
var name = $(this).closest(".menu_copy").find("input[name='name']").val();
var color = $(this).closest(".menu_copy").find("input[name='color']").val();
var data_id = $(this).closest(".menu_copy").attr("data-id")
$("#" + data_id).text(name);//add name
$("#" + data_id).css("color", color);//apply color
$(this).closest(".menu_copy").hide(); //hide the menu
})
});
body {
width: 100vw;
height: 100vh;
background: grey;
}
.document {
position: absolute;
transform: translate(-50%, -50%);
opacity: 1;
background-color: red;
resize: both;
overflow: auto;
filter: drop-shadow(0 0 0.2rem black);
}
.menu {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="menu_copy" style="display:none">
<li><input type="text" id="name" name="name" size="10" placeholder="name"></li>
<li><input type="text" id="color" name="color" size="10" placeholder="color"></li>
<button class="validate">OK</button>
</div>
<!--added this divs new menus will go inside this -->
<div class="docs"></div>
</body>
Related
I'd like to use https://github.com/lonekorean/mini-preview to create mouseover previews for parts of a website only.
I have no problems using anchors from the target website to have the script render a full website preview, scrolled to where an individual anchor is.
That's not what I'm after however.
I'd like the script to show only the content of the anchors' parent <p> or <div>.
On the site, the link target anchors are coded like this:
<div class="paragraph">
<p>
<a id="anchor_1"></a>
Foo bar baz.
</p>
</div>
So, I'd like the little preview box to show Foo bar baz. only.
I suspect the answer lies in this part of the script:
loadPreview: function() {
this.$el.find('.' + PREFIX + '-frame')
.attr('src', this.$el.attr('href'))
.on('load', function() {
// some sites don't set their background color
$(this).css('background-color', '#fff');
});
specifically, the .attr('src', this.$el.attr('href')) part.
I'm not sure though.
Does anyone know how I can do this?
Or can you recommend some other script that I can use to do this and makes things look as nice as this one?
I'm not a web dev, so please go easy on me.
Thanks
UPDATE (based on Swati's answer and corresponding comments):
For example, if my website includes this:
<body>
<p>
See internal
</p>
<p>
See external
</p>
<div class="paragraph">
<p>
<a id="anchor_on_my_site"></a>
Foo bar baz.
</p>
</div>
</body>
and the external website includes this:
<body>
<div class="paragraph">
<p>
<a id="external_anchor"></a>
Qux quux quuz.
</p>
</div>
</body>
I'd like See internal to display Foo bar baz. and See external to display Qux quux quuz.
Inside loadPreview function you can use closest('p').clone().children().remove().end().text() to get text from p tag where a has been hover then using this put that text to show inside your frame div i.e : .find('.' + PREFIX + '-frame').text(data_to_show) .
Demo Code :
(function($) {
var PREFIX = 'mini-preview';
$.fn.miniPreview = function(options) {
return this.each(function() {
var $this = $(this);
var miniPreview = $this.data(PREFIX);
if (miniPreview) {
miniPreview.destroy();
}
miniPreview = new MiniPreview($this, options);
miniPreview.generate();
$this.data(PREFIX, miniPreview);
});
};
var MiniPreview = function($el, options) {
this.$el = $el;
this.$el.addClass(PREFIX + '-anchor');
this.options = $.extend({}, this.defaultOptions, options);
this.counter = MiniPreview.prototype.sharedCounter++;
};
MiniPreview.prototype = {
sharedCounter: 0,
defaultOptions: {
width: 256,
height: 144,
scale: .25,
prefetch: 'parenthover'
},
generate: function() {
this.createElements();
this.setPrefetch();
},
createElements: function() {
var $wrapper = $('<div>', {
class: PREFIX + '-wrapper'
});
//no need to use iframe...use simple div
var $frame = $('<div>', {
class: PREFIX + '-frame'
});
var $cover = $('<div>', {
class: PREFIX + '-cover'
});
$wrapper.appendTo(this.$el).append($frame, $cover);
// sizing
$wrapper.css({
width: this.options.width + 'px',
height: this.options.height + 'px'
});
// scaling
var inversePercent = 100 / this.options.scale;
$frame.css({
width: inversePercent + '%',
height: inversePercent + '%',
transform: 'scale(' + this.options.scale + ')'
});
var fontSize = parseInt(this.$el.css('font-size').replace('px', ''), 10)
var top = (this.$el.height() + fontSize) / 2;
var left = (this.$el.width() - $wrapper.outerWidth()) / 2;
//add more style here ...if needed to outer div
$wrapper.css({
top: top + 'px',
left: left + 'px',
'font-size': '55px',
'color': 'blue'
});
},
setPrefetch: function() {
switch (this.options.prefetch) {
case 'pageload':
this.loadPreview();
break;
case 'parenthover':
this.$el.parent().one(this.getNamespacedEvent('mouseenter'),
this.loadPreview.bind(this));
break;
case 'none':
this.$el.one(this.getNamespacedEvent('mouseenter'),
this.loadPreview.bind(this));
break;
default:
throw 'Prefetch setting not recognized: ' + this.options.prefetch;
break;
}
},
loadPreview: function() {
//to get text from p tag
var data_to_show = this.$el.closest('p').clone().children().remove().end().text().trim()
//set new text inside div frame
this.$el.find('.' + PREFIX + '-frame').text(data_to_show)
//set bg color..
this.$el.find('.' + PREFIX + '-frame').css('background-color', '#fff');
},
getNamespacedEvent: function(event) {
return event + '.' + PREFIX + '_' + this.counter;
},
destroy: function() {
this.$el.removeClass(PREFIX + '-anchor');
this.$el.parent().off(this.getNamespacedEvent('mouseenter'));
this.$el.off(this.getNamespacedEvent('mouseenter'));
this.$el.find('.' + PREFIX + '-wrapper').remove();
}
};
})(jQuery);
$('a').miniPreview();
body {
height: 100%;
margin: 0;
padding: 0 10% 40px;
font-size: 2rem;
line-height: 1.5;
font-family: 'Roboto Slab', sans-serif;
text-align: justify;
color: #59513f;
background-color: #f5ead4;
}
a {
color: #537f7c;
}
.mini-preview-anchor {
display: inline-block;
position: relative;
white-space: nowrap;
}
.mini-preview-wrapper {
-moz-box-sizing: content-box;
box-sizing: content-box;
position: absolute;
overflow: hidden;
z-index: -1;
opacity: 0;
margin-top: -4px;
border: solid 1px #000;
box-shadow: 4px 4px 6px rgba(0, 0, 0, .3);
transition: z-index steps(1) .3s, opacity .3s, margin-top .3s;
}
.mini-preview-anchor:hover .mini-preview-wrapper {
z-index: 2;
opacity: 1;
margin-top: 6px;
transition: opacity .3s, margin-top .3s;
}
.mini-preview-cover {
background-color: rgba(0, 0, 0, 0);
/* IE fix */
}
.mini-preview-frame {
border: none;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body>
<div class="paragraph">
<p>
<a id="anchor_1">See</a> This is text we are showing for first
</p>
<p>
<a id="anchor_2">See</a> This is text we are showing for second
</p>
</div>
</body>
</html>
Update 1 :
You can differentiate between external & internal link using some class i.e : simply check if the a tag which is hover has a particular class or not depending on this change your code to preview divs.
Updated Code :
if (this.$el.hasClass("internal")) {
//to get text from p tag
var data_to_show = this.$el.closest('p').siblings(".paragraph").clone().text().trim()
//set new text inside div frame
this.$el.find('.' + PREFIX + '-frame').text(data_to_show)
//set bg color..
this.$el.find('.' + PREFIX + '-frame').css('background-color', '#fff');
} else {
console.log("for external code ..")
}
I'm building a tabbed content page. I was trying to build a form that would take a value from the form and create a new tab and also create a new div that would attach to the tab, that would be triggered by an on click function. I was having some trouble creating the div, it didn't seem to launch. When the value is entered, the tab is supposed to go active so the content would show up. I think I'm either doing something wrong with the new div or the on click function. I wasn't sure if those two code pieces should be combined, since they seemed to be in conflict. Thanks.
jQuery(document).ready(function() {
jQuery('.tabs .tab-links a').on('click', function(e) {
var currentAttrValue = jQuery(this).attr('href');
$('.tabs ' + currentAttrValue).show();
$('.tabs ' + currentAttrValue).animate({
opacity: 1,
paddingLeft: '30%'
}, 400);
$('.tabs ' + currentAttrValue).siblings().css({
opacity: 0,
paddingLeft: '0%'
});
$('.tabs ' + currentAttrValue).fadeIn(400).siblings().hide();
jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
e.preventDefault();
});
});
$(function() {
var $textInput = $('input:text');
$('#examine').on('submit', function(e) {
e.preventDefault();
var newText = $textInput.val();
$('ul:last').append('<li>Searching...</li>');
$('#tab-content').append('<div id ="tab5' + '"class="tab active"><p>the quick brown fox</p></div>');
jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
$textInput.val('');
});
});
.tab-links {
float: left;
}
.tab-links:after {
display: block;
clear: both;
content: '';
}
.tab-links li {
list-style-type: none;
background-color: #303030;
border-bottom: 3px solid #858585;
font-family: 'Jacques Francois', serif;
text-transform: uppercase;
letter-spacing: 0.09em;
margin-left: -25%;
}
.tab-links li a {
color: #f2f2f2;
display: block;
padding: 3px 10px 3px 10px;
text-decoration: none;
}
.tab-links a:hover {
background: #a7cce5;
text-decoration: none;
}
.tab-links li.active,
.tab-links li.hover {
background-color: #e5e5e5;
border-bottom: 3px solid #e5e5e5;
}
.tab-links li.active a,
.tab-links li a:hover {
color: #666;
background-color: #e5e5e5;
}
/*----- Content of Tabs -----*/
.tab-content {
background-color: #e5e5e5;
color: #666;
min-height: 150px;
overflow: auto;
}
#tab1 {
padding-left: 30%;
}
#tab2,
#tab3,
#tab4,
#tab5 {
display: none;
opacity: 0;
padding-left: 0%;
}
.tab-content p {
margin: 20px;
text-indent: -40%;
}
.tab-content.active {
display: block;
text-indent: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="sidebar">
<div id="explore">
<form id="examine">
<p>Search</p>
<input type="search" name="explore" placeholder="Search Items" />
<p>Choose Your Search Restrictions</p>
<input type="radio" name="location" required="required" value="Your School" />Inside
<input type="radio" name="location" required="required" value="Whole system" />Outside
<input type="submit" value="Search" />
</form>
</div>
<div class="tabs">
<ul class="tab-links">
<li class="active">Tab1
</li>
<li>Tab2
</li>
<li>Tab3
</li>
<li>Tab4
</li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab active">
<p>Tab1 content</p>
</div>
<div id="tab2" class="tab">
<p>Tab2 content</p>
</div>
<div id="tab3" class="tab">
<p>Tab3 content</p>
</div>
<div id="tab4" class="tab">
<p>Tab4 content</p>
</div>
First off you do not need two document ready handlers.
For clarity, I have added the NEW index to the "Searching..." string so you may need to edit that.
Use the index to get the new ID and append that to the list.
cache the tab and not process DOM for the tab
I assume you have some need for $textInput.val(''); so I left it
put your click handler on the .tab-links so new ones will have it (not on a1)
consider using classes and indexes instead of new IDs for tab5 etc.
if you use classes you could then clone the last tab and put in new content into the clone, making it more maintainable if the markup changes
I put a trigger on the newly added tab to activate it - it SEEMED as if that was your desire?
Consider a BUTTON rather than <input type="submit"...
Revised code:
jQuery(document).ready(function() {
jQuery('.tabs').find('.tab-links').on('click', 'a', function(e) {
var currentAttrValue = jQuery(this).attr('href');
// cache instead of multiple
var thisTab = $(currentAttrValue);
thisTab.show().animate({
opacity: 1,
paddingLeft: '30%'
}, 400);
thisTab.siblings().css({
opacity: 0,
paddingLeft: '0%'
});
thisTab.fadeIn(400).siblings().hide();
jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
e.preventDefault();
});
var $textInput = $('input:text');
$('#examine').on('submit', function(e) {
e.preventDefault();
var newText = $textInput.val();
var newIndex = $('.tab-links').find('li').length + 1;
$('.tab-content').append('<div id="tab' + newIndex + '" class="tab"><p>the quick brown fox ' + newIndex + '</p></div>');
$textInput.val('');
$('.tab-links').append('<li>Searching...' + newIndex + '</li>');
$('.tab-links').find('a').eq(newIndex - 1).trigger('click');
});
});f
EDIT: Per comment, update if already at max count:
This is not super efficient but you can get started with this.
jQuery(document).ready(function() {
jQuery('.tabs').find('.tab-links').on('click', 'a', function(e) {
var currentAttrValue = jQuery(this).attr('href');
// console.log(currentAttrValue);
var thisTab = $(currentAttrValue);
thisTab.show().animate({
opacity: 1,
paddingLeft: '30%'
}, 400);
thisTab.siblings().css({
opacity: 0,
paddingLeft: '0%'
});
thisTab.fadeIn(400).siblings().hide();
jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
e.preventDefault();
});
var maxTabCount = 5;
var $textInput = $('input[type=search]');
$('#examine').on('submit', function(e) {
e.preventDefault();
var newText = $textInput.val();
var tabCount = $('.tab-links').find('li').length;
var newIndex = tabCount + 1;
var newText = $textInput.val() ? $textInput.val() : "Default Tab Text";
if (tabCount < maxTabCount) {
$('.tab-content').append('<div id="tab' + newIndex + '" class="tab"><p>the quick brown fox ' + newIndex + '</p></div>');
$('.tab-links').append('<li>Searching...' + newIndex + '</li>');
} else {
$('.tab-content').find('div.tab').last().find('p').html("New Search Content");
$('.tab-links').find('li').last().find('a').html(newText);// new tab text
}
$textInput.val('');
$('.tab-links').find('a').last().trigger('click');
});
});
You are using id for tab-content instead of class. Use the following line:
$('.tab-content').append('<div id ="tab5' + '"class="tab active">...</div>');
Replace this line jQuery('.tabs .tab-links a').on('click', function(e) with the following:
jQuery(document).on("click",".tabs .tab-links a",function() {
Am creating an HTML page with some buttons to create the input boxes. The buttons should behave like toggle one. ie, on first click input box should appear and if the same button in clicked again that particular input box need to disappear. Button toggle i have managed. But div is not creating
This is my toggle button
<button class="btn" id="button_rd" onclick="setColor('button_rd', '#101010')";>one</button>
Following is the javascript
var count = 1;
function setColor(btn, color) {
var property = document.getElementById(btn);
if (count == 0) {
property.style.backgroundColor = "#f4543c"//red
property.style.borderColor = "#f4543c"
count = 1;
}
else {
property.style.backgroundColor = "#00a65a"//green
property.style.borderColor = "#008d4c"
count = 0;
var newdiv = '<div class="form-group"><label for="exampleInputEmail1">email</label>'
+'<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email"></div>'
document.getElementById("create").append(newdiv);
}
}
And below is the place where I need the input box to display(inside this div)
<div class="box-body" id="create">
</div>
If you're happy to use Jquery, Something like this may be what you're looking for.
it's not so much as 'creating' an element, more actually 'toggling' its visibility
$(document).ready(function() {
$('[id^=bool]').click(function() {
var id = $(this).attr("id").substr($(this).attr("id").length - 1);
$('[id^=bool' + id + '] .switcher').toggleClass("switched");
var x = $('[id=input' + id + ']').length;
if (x > 0) //there is one there
{
$('[id=input' + id + ']').remove();
} else {
$('body').append('<input type="text" id="input' + id + '" placeholder="input ' + id + '" />');
}
});
});
.bool {
height: 40px;
width: 100px;
background: darkgray;
position: relative;
border-radius: 5px;
overflow: hidden;
box-shadow: inset 5px 0 6px gray;
border: 1px solid black;
}
.bool:before {
content: "On";
left: 10%;
position: absolute;
top: 25%;
}
.bool:after {
content: "Off";
right: 10%;
position: absolute;
top: 25%;
}
.switcher {
height: 100%;
width: 50%;
position: absolute;
background: lightgray;
top: 0;
left: 0;
z-index: 5;
transform: translateX(0px);
transition: all 0.5s;
border-radius: 5px;
box-shadow: inset 0 0 6px black;
}
.switched {
transform: translateX(50px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bool" id="bool1">
<div class="switcher"></div>
</div>
<div class="bool" id="bool2">
<div class="switcher"></div>
</div>
Edit History
Altered snippet to include 2 toggles, as per comments
refactored jquery method with help from Tambo
altered markup to 'append' and 'remove' instead
OnClick write following code to hide:
document.getElementById('create').style.display = 'none';
And following code to show:
document.getElementById('create').style.display = 'block';
Like:
JavaScript:
<script type="text/javascript">
var count = 1;
function hidShow()
{
if(count == 1)
{
document.getElementById('create').style.display = 'none';
count = 0;
}
else
{
document.getElementById('create').style.display = 'block';
count = 1;
}
}
</script>
HTML:
<button id="button_rd" onClick="hidShow()">one</button>
<div class="box-body" id="create">
<input type="text" id="txt"/>
</div>
instead of
document.getElementById("create").append(newdiv);
'innerHTML' works for me, like below:
document.getElementById("create").innerHTML = '<div class="form-group"><label for="exampleInputEmail1">email</label>'
+'<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email"></div>'
to remove the div on toggle i used
$('div_id').remove();
Scenario
I am having a functionality in my project in which we have to add a note in a section and then it can be moved to the other sections. It is a sort of task tracking.
I am able to add a note dynamically created into one section and have made that note dragable. The note, sections are divs.
Problem
I am not able to drag the note to the other section or div. the note is draggable in its own section (div). Please help me with the solution so that it can be moved to other section.
Here is my HTML code:
<div id="addTaskDiv" style="height: 150px">
<a id="addTask" onclick="AddNote();">ADD Task</a> <a id="a1" onclick="AddText();">Submit</a>
</div>
<div id="MySplitter">
<div id="leftDiv" style="height: 150px; border-style: groove; width: 100%;">
left here
</div>
<div id="splitterUpperDiv">
<div id="midDiv" style="height: 150px; border-style: groove; width: 100%;">
middle here
</div>
<div id="rightDiv" style="height: 150px; width: 100%; border-style: groove;">
right here
</div>
</div>
</div>
Here is my .js
$().ready(function () {
$("#MySplitter").splitter();
$("#splitterUpperDiv").splitter();
$("#rightDiv").droppable();
$("#midDiv").droppable();
$("#leftDiv").droppable();
});
function AddNote(args, seder) {
var i = (typeof this.rel != 'undefined') && (this.rel - 0) == this.rel ? this.rel : 0;
var br = document.createElement("br");
$("#addTaskDiv")[0].appendChild(br);
addArea();
return false;
}
function addArea() {
var i = (typeof this.rel != 'undefined') && (this.rel - 0) == this.rel ? this.rel : 0;
var button = $(this);
var commentField = $('<textarea/>'); // create a textarea element
commentField[0].id = 'added' + i;
commentField
.css({
position: 'absolute',
width: 200, // textbox 200px by 100px
height: 100
})
// set the textarea's value to be the saved content, or a default if there is no saved content
.val(button.data('textContent') || 'This is my comment field\'s text')
// set up a keypress handler on the textarea
.keypress(function (e) {
if (e.which === 13) { // if it's the enter button
e.preventDefault(); // ignore the line break
button.data('textContent', this.value); // save the content to the button
$(this).remove(); // remove the textarea
}
})
.appendTo($("#addTaskDiv")[0]); // add the textarea to the document
}
function AddText() {
var i = (typeof this.rel != 'undefined') && (this.rel - 0) == this.rel ? this.rel : 0;
var a = $("#added0")[0].value;
var x = document.createElement("div");
x.width = '200px';
x.height = 'auto';
x.id = 'lable' + i;
this.rel = i + 1;
x.innerText = a;
var br = document.createElement("br");
$("#leftDiv")[0].appendChild(br);
$("#leftDiv")[0].appendChild(x);
$("#lable" + i + "").draggable();
}
You can try this :-
$("#rightDiv").droppable({
accept: '.draggableObject',
});
Please study this example code,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
section{
background: rgba(0, 0, 0, .1);
padding: 20px;
height: 350px;
margin: 20px 0 0 0;
border-radius: 20px;
}
#myDiv{
cursor: move;
background: red;
height: 150px;
width: 150px;
float: left;
}
#targetDiv{
background: red;
height: 300px;
width: 300px;
float: right;
}
</style>
</head>
<body>
<script>
window.onload = function(){
var count=0;
var myDiv=document.getElementById('myDiv');
var targetDiv=document.getElementById('targetDiv');
myDiv.addEventListener('dragstart', function(e)
{
/* change ui to see clearly */
this.style.opacity= 0.2;
this.style.borderStyle= 'dashed';
targetDiv.style.backgroundColor= 'yellow';
/* set text from this as an argument to transfer */
e.dataTransfer.setData("Text", this.innerHTML);
}, false);
myDiv.addEventListener('dragend', function(e)
{
/* change ui to see clearly */
this.style.opacity=1;
this.style.borderStyle= 'solid';>
targetDiv.style.backgroundColor='red';
/* change text of dragend div */
this.innerHTML="Total Count : "+ (++count) ;
}, false);
targetDiv.addEventListener('dragover', function(e)
{
/* change ui to see clearly */
this.style.backgroundColor='green';
if(e.preventDefault){ e.preventDefault(); };
},false);
targetDiv.addEventListener('dragleave', function(e)
{
/* change ui to see clearly */
this.style.backgroundColor='yellow';
}, false);
targetDiv.addEventListener('drop', function(e)
{
/* get text from dropped div */
this.innerHTML= e.dataTransfer.getData("Text");
if( e.preventDefault ){ e.preventDefault(); };
},false);
}
</script>
<div draggable="true" id="myDiv">
Drag able Area.
</div>
<div id="targetDiv">
Target Area.
</div>
</body>
</html>
I'm trying to use jQuery UI to animate a transition on a form and while the code works correctly in Firefox and Chrome, a Javascript error occures in IE8.
I'm using jquery-ui-1.8.2.custom.min.js and the error given is:
Message: 'end.0' is null or not an object - Line: 819 - Char: 6
My CSS:
.formfield {
background-color: White;
border: none;
padding: 5px;
width: 90%;
overflow: hidden;
margin: 0px;
}
.formfieldselected {
background-color: MintCream;
border: none;
padding: 5px;
margin: 0px;
overflow: hidden;
}
Javascript:
$(document).ready(function()
{
$(":input").each(function()
{
var myInput = $(this);
if (this.type == 'submit')
{
return;
}
myInput.bind('focusin', function()
{
$('#' + this.id + 'field').removeAttr('style'); // Reset Style if broken
$('#' + this.id + 'field').switchClass('formfield', 'formfieldselected', 300);
$('#' + this.id + 'helpbox').removeClass('helpboxhidden').addClass('helpboxvisible');
});
myInput.bind('focusout', function()
{
$('#' + this.id + 'field').switchClass('formfieldselected', 'formfield', 300);
$('#' + this.id + 'helpbox').removeClass('helpboxvisible').addClass('helpboxhidden');
});
});
...
}
And finally one of the elements this code is supposed to be working on:
<DIV id="eventnamefield" class="formfield">
<DIV id="eventnamehelpbox" class="helpboxhidden">
This name is used throughout the system to refer to this event and is shown to Attendees
</DIV>
<label for="eventname" class="adminformlabel">Event Name:</label>
<br />
<input type="text" name="eventname" value="" id="eventname" maxlength="50" class="adminforminput" />
</DIV>
Found the answer.
Turns out jQuery UI under IE can not handle colours referenced by name. Changing the colours to their hex codes in the CSS fixed the problem.