I am using jquery to do drag and drop. I am able to do drag and drop. My dragged element is an image. Now, I want to show this image on target which is a table cell(td). How to do this?
$(".emptyimg").draggable();
$("#tdcell").droppable({
drop: function(event, ui ) {$(ui.draggable).??;}
});
thanks
Check the following code:
<style>
#draggable { width: 150px; height: 150px; padding: 0.5em; }
</style>
<script>
$(function () {
$("#draggable").draggable();
});
</script>
<div class="demo">
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
<div id="draggable" class="ui-widget-content" style="cursor:move">
<p>Drag me around</p>
</div>
</div><!-- End demo -->
Related
I need to add 3 ads in a page. I have created those ads in AdSense console, then, I added this code once in the page, before </head>:
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7744644029571866"
crossorigin="anonymous"></script>
At the end of the page, I added:
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
Finally, inside the DIV's where I need the ads to appear, I added:
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-client"
data-ad-slot="myslot"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
After that, when I load the page, these errors are shown in browser console:
adsbygoogle.push() error: No slot size for availableWidth=80
adsbygoogle.push() error: No slot size for availableWidth=80
adsbygoogle.push() error: All ins elements in the … with
class=adsbygoogle already have ads in them.
How can I solve this?
In very top of Head of HTML Add
<style>
.adsbygoogle {position:relative;width:100%;}
</style>
or Manually Define Adsize by acceptable Admodification
<style>
.example_responsive_1 { width: 300px; height: 250px; }
#media(min-width: 500px) { .example_responsive_1 { width: 468px; height: 60px; } }
#media(min-width: 800px) { .example_responsive_1 { width: 728px; height: 90px; } }
</style>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXX" crossorigin="anonymous"></script>
<!-- example_responsive_1 -->
<ins class="adsbygoogle example_responsive_1"
style="display:inline-block"
data-ad-client="ca-pub-XXX"
data-ad-slot="YYYY"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
I am looking at this "Sortable example" and I can see that the user is able to re-arrange numbers, the source for the above example :
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Sortable - Display as grid</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<style>
#sortable { list-style-type: none; margin: 0; padding: 0; width: 450px; }
#sortable li { margin: 3px 3px 3px 0; padding: 1px; float: left; width: 100px; height: 90px; font-size: 4em; text-align: center; }
</style>
<script>
$(function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
});
</script>
</head>
<body>
<ul id="sortable">
<li class="ui-state-default">1</li>
<li class="ui-state-default">2</li>
<li class="ui-state-default">3</li>
<li class="ui-state-default">4</li>
<li class="ui-state-default">5</li>
<li class="ui-state-default">6</li>
<li class="ui-state-default">7</li>
<li class="ui-state-default">8</li>
<li class="ui-state-default">9</li>
<li class="ui-state-default">10</li>
<li class="ui-state-default">11</li>
<li class="ui-state-default">12</li>
</ul>
</body>
</html>
is it possible to sort this example so it sorts the numbers from smallest to largest and does not allow the user to re-arrange the numbers? for example if I try to drag 12 and place it before 1, it automatically goes back to its original place.
Thank you
Don't call sortable, just sort the list in reverse order. The sortable function allows the user to drag an item. If you didn't call disableSelection then them items in the list would be selectable.
$(function() {
try {
var html = $('#sortable').html();
var arr = html.split('</li>');
html = '';
for (var i = arr.length - 1; i >= 0; --i) {
html += arr[i] + "</li>";
}
$('#sortable').html(html);
} catch (e) {
alert(e);
}
});
I was recently reading on Unobtrusive javascript and decided to give it a shot. Whether or not I decide to use this style is to be determined at a later time. This is just for my own curiosity and not for any time restricted project.
Now, I was looking at example code and a lot of the examples seem to be using, what took me forever to discover, jQuery. They use a function like $('class-name').whatever(...);
Well I rather like the look of $('class').function, so I tried to emulate it without using jQuery(as I don't know jQuery and don't care about it atm). I'm unable, however, to make this example work.
Here is my jsFiddle: http://jsfiddle.net/dethnull/K3eAc/3/
<!DOCTYPE html>
<html>
<head>
<title>Unobtrusive Javascript test</title>
<script>
function $(id) {
return document.getElementById(id);
}
$('tester').onclick(function () {
alert('Hello world');
});
</script>
<style>
.styled {
width: 200px;
margin-left: auto;
margin-right: auto;
font-size: 2em;
}
a {
cursor: pointer;
color: blue;
}
a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class='styled'>
<ul>
<li><a id='tester'>CLICK ME</a></li>
</ul>
</div>
</body>
</html>
I was expecting an alert box to pop up when you click on the link, but doesn't seem to happen. When checking the console in chrome it gives this message "Uncaught TypeError: Cannot call method 'onClick' of null"
I'm not a javascript expert, so more than likely I'm doing something wrong. Any help is appreciated.
Try this code,
Script
function $(id) {
return document.getElementById(id);
}
$('tester').addEventListener('click', function () {
alert('Hello world');
});
When you console this $('tester') selector, it simply returns <a id='tester'>CLICK ME</a> which is a html element not an object so you cannot use onclick directly. Instead you have to use addEventListener or attachEvent to bind a click event
Demo JS http://jsfiddle.net/K3eAc/4/
You don't need addEventListener or attachEvent: live demo.
The code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Unobtrusive Javascript test</title>
<style>
.styled {
width: 200px;
margin-left: auto;
margin-right: auto;
font-size: 2em;
}
</style>
</head>
<body>
<div class="styled">
<ul>
<li>CLICK ME</li>
</ul>
</div>
<script>
var tester = document.getElementById('tester');
tester.onclick = function() {
alert('Hello world');
}
</script>
</body>
</html>
.
I'm better in practice than in theory, but it would seem to me that with converting the targeted element into a variable, it becomes an object. Tested in IE8/9, Chrome25 and FF30.
Try this
function $(id) {
return document.getElementById(id);
}
var a = $('tester');
a.onclick = (function () {
alert('Hello world');
});
Reference : https://developer.mozilla.org/en-US/docs/DOM/element.onclick
I made the mouse hover animate, when I move the mouse over the link it will show the image and when I move the mouse to another link the previous image have to disappear and show another image that belong to another link.
<style>
.imgHover {
display: inline;
position: relative;
}
.hover {
display: none;
position: absolute;
z-index: 2;
}
</style>
<script type="text/javascript">
$(function() {
$(".imgHover").hover(
function() {
$(this).children("img").fadeTo(200, 0.85).end().children(".hover").fadeIn(100);
},
function() {
$(this).children("img").fadeTo(200, 1).end().children(".hover").fadeOut(100)();
});
});</script>
<a class="imgHover" href="htpp://google.com">Text Link 1
<img class="hover" src="image_link1.jpg" alt=""></a>
<a class="imgHover" href="htpp://google.com">Text Link 2
<img class="hover" src="image_link2.jpg" alt=""></a>
///////////////////////////////////
Can I move the code link this and when I mouse hover Text Link 1 the script select the image 1... Please help.
<div id="imageshow">
<img class="hover" src="image_link1.jpg" alt="">
<img class="hover" src="image_link2.jpg" alt="">
</div>
<div id="link">
<a class="imgHover" href="htpp://google.com">Text Link 1 </a>
<a class="imgHover" href="htpp://google.com">Text Link 2 </a>
</div>
You have to put it before the first fade:
$(".imgHover").hover(
function() {
$(this).children("img").stop().fadeTo(200, 0.85).end().children(".hover").fadeIn(100);
},
function() {
$(this).children("img").stop().fadeTo(200, 1).end().children(".hover").fadeOut(100)();
});
<script type="text/javascript">
$(function() {
$(".imgHover").hover(
function() {
$(".imgHover img, .imgHover img .hover").stop();
$(this).children("img").fadeTo(200, 0.85).end().children(".hover").fadeIn(100);
},
function() {
$(".imgHover img, .imgHover img .hover").stop();
$(this).children("img").fadeTo(200, 1).end().children(".hover").fadeOut(100)();
});
});
</script>
I wan to show an overlay programmatically. I tried to modify the code in this example Opening overlays programmatically. Instead of loading the overlay only once upon document load as shown in this example, I want to show the overlay everytome a user clicks the button. The problem is thatthe overlay is loaded only for the first click. It does not open for the subsequent clicks on the same button
Here is my code.
<html>
<head>
<title>jQuery Tools standalone demo</title>
<script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/standalone.css"/>
<style>
#facebox {
display:none;
width:400px;
border:10px solid #666;
border:10px solid rgba(82, 82, 82, 0.698);
-moz-border-radius:8px;
-webkit-border-radius:8px;
}
#facebox div {
padding:10px;
border:1px solid #3B5998;
background-color:#fff;
font-family:"lucida grande",tahoma,verdana,arial,sans-serif
}
#facebox h2 {
margin:-11px;
margin-bottom:0px;
color:#fff;
background-color:#6D84B4;
padding:5px 10px;
border:1px solid #3B5998;
font-size:20px;
}
</style>
<script>
var overlayDiv=function(){
$("#facebox").overlay({
api: true,
top: 260,
mask: {
color: '#fff',
loadSpeed: 200,
opacity: 0.5
},
closeOnClick: false,
load: true
})
};
$(document).ready(function() {
$("#triggerBtn").click(function(){
console.log(" I have been CLICKED");
overlayDiv();
});
});
</script>
<body>
<button id="triggerBtn"> Trigger Overlay</button>
<div id="facebox">
<div>
<h2>Facebox</h2>
<p>
This dialog is opened programmatically when the page loads. There is no need for a trigger element.
</p>
<form>
<input type="file" />
</form>
<p style="color:#666">
To close, click the Close button or hit the ESC key.
</p>
<p>
<button class="close"> Close </button>
</p>
</div>
</div>
</body>
This should do the trick for you.
$("#triggerBtn").click(function(){
console.log(" I have been CLICKED");
$('#facebox').data('overlay').load();
});
More information here - Jquery Tools Overlay Scripting API
This is working for me... I found this method on the jQuery Tools forum and seems to be the best I can find for now.
<script>
function popup() {
if ($("#facebox").hasClass("init")) {
$("#facebox").overlay().load();
}
else {
$("#facebox").addClass("init");
$("#facebox").overlay({
// custom top position
top: 260,
mask: { color: '#838383',
loadSpeed: 200,
opacity: 0.5
},
closeOnClick: true,
load: true
});
}
}
</script>
Simplify:
var overlay;
function overlayDiv()
{
if (typeof overlay === 'undefined')
overlay = $('#facebox').data('overlay').load();
else
overlay.load();
}
You should use:
$(".overlay").remove();