Is there a library that can (with minimum hassle on my part) emulate the new native drag-and-drop functionality in HTML5 so that the technique is reasonably portable? If so, I'm looking for a short code example of its usage.
You can use jquery ui.
http://jqueryui.com/demos/droppable/
I think it's easy enough to use.
$(function() {
$( "#draggable" ).draggable();
$( "#droppable" ).droppable({
drop: function( event, ui ) {
//blah blah blah
}
});
});
</script>
Related
I want to remove the dependency of Iframe from my application. What are the possible way I can call a different application URL other than using iframe, object or html embeded variable.
I am trying something like this.
<body>
<a class="ajax" href="http://www.google.com">
Open in Modal Window
</a>
<script type="text/javascript">
$(function (){
$('a.ajax').click(function() {
var url = this.href;
var dialog = $('<div style="display:none" class="Waiting"></div>').appendTo('body');
dialog.dialog({
close: function(event, ui) {
dialog.remove();
},
modal: true
});
dialog.load(
url,
{},
function (responseText, textStatus, XMLHttpRequest) {
dialog.removeClass('Waiting');
}
);
return false;
});
});
</script>
</body>
sorry can't comment
assuming there's no no anti CSF or similar measures on the target website you can use JavaScript ajax
or do it server side by grabbing the site
for better help describe what you're trying to archive what you did providing sample code if possible
In this demo http://jsfiddle.net/pHJgP/8/ an image gets replaced with a text
I'd like to do the same on a blogger post http://myblog.blogspot.com/2015/06/firstpost.html
This code goes into post body:
<div id="outer"><img src="http://existdissolve.com/wp-content/uploads/2010/08/microsoft-logo-64x64.png"/></div>
<div id="text" style="display:none">Text here</div>
Where do I put this code?
$(document).ready(function()
{
setTimeout(function()
{
$("div#outer").fadeOut("slow", function ()
{
$("div#outer img").remove();
$("div#outer").html($("div#text").text());
$("div#outer").show();
});
}, 3000);
});
Do I need to add an operator to invoke the function or action in this particular post http://myblog.blogspot.com/2015/06/firstpost.html when it opens? And where/how do I add that operator or trigger code?
What else is missing ?
Before asking I've read several posts on stackoverflow.com , on w3schools.com , etc. experimented but failed due to the lack of knowledge.
place this code just above or before </head>
<script src='http://code.jquery.com/jquery-1.7.2.js'/>
<script type='text/javascript'>
$(document).ready(function()
{
setTimeout(function()
{
$("div#outer").fadeOut("slow", function ()
{
$("div#outer img").remove();
$("div#outer").html($("div#text").text());
$("div#outer").show();
});
}, 3000);
});
</script>
Note: 1.7.2 is taken from the top left corner of the demo http://jsfiddle.net/pHJgP/8/
if 1.7.2 did not work, try other versions.
I am not a PRO. And this is all I know from experimenting.
I could be wrong
May be for you guys is obvious but for me is not.
I would like to create an i help image, that when it is clicked it pop ups a window with information.
I have tried something like this but it does not help:
<a id="dialog-1" href="#"><button id="opener" >i</button></a>
<script>
$(function() {
$( "#dialog-1" ).dialog({
autoOpen: false,
});
$( "#opener" ).click(function() {
$( "#dialog-1" ).dialog( "open" );
});
});
</script>
application.js
//= require jquery
//= require jquery_ujs
//= jquery-ui
//= require turbolinks
//= require_tree .
answer from my comments
Did you include the library jquery-ui?
include the jquery-ui library in your application.js file.
There are many many ways to accomplish what you need.
I will make a suggestion, there are probably other ways but this is something simple.
For the "i" image, I recommend you getting an actual image, better a png with transparent background.
Another option is using an iconic font, such as Font Awesome (example). It looks like an image, but it is treated like a font, so you can change the color, size, etc.
For the pop-up. Single option is creating a hidden div with absolute positioning and opening it with javascript/jQuery and maybe fading the background a little bit. You can google it a little bit and will find many solutions, one will fit your need for sure.
As a second improvement: If the content is very heavy, you may want to load it on demand via AJAX or other async ways, but first get the info window working :)
maybe you miss the $( document ).ready(function() { ... });
try with this:
<a id="dialog-1" href="#"><button id="opener" >i</button></a>
<script>
$(function() {
$( document ).ready(function() {
$( "#dialog-1" ).dialog({
autoOpen: false,
});
$( "#opener" ).click(function() {
$( "#dialog-1" ).dialog( "open" );
});
});
});
</script>
I have an accordion element in my page. The problem is that the accordion appears on the page but it is not clickable. By 'not clickable', I mean that when I click on the header it does not expand to reveal the contents. Nothing happens at all. I hope someone can help.
Thanks in advance.
Your jQuery.js module must be loaded before the semantic-ui accordion.js
module.
Simply put
<script src="js/accordion.js"></script>
after
<script src="js/vendor/jquery-1.11.2.min.js"><\/script>
( or whatever your jQuery version is ... )
and initialize the accordion in the html document inside a script tag as :
<script language='javascript'>
$(document).ready(function(){
$('.ui.accordion').accordion();
});
</script>
It happens on nested accordions while you script is under $( document ).ready(function()
So try to call accordion function in an ajax callback like this;
$('input[name=sampleInput]').on('input', function() {
var val = $("input[name=sampleInput]").val();
if (val.length >= 3)
{
$.ajax( {
url: 'sample_handler.php',
type: 'GET',
data: {
data: data
},
dataType: 'html',
success: function ( response ) {
$('.ui.accordion').accordion({});
}
})
}
})
For instance, I've put accordion function in a callback. So I could use it again and again, even I add nested accordions.
In my case I had syntax errors inside javascript/jQuery. After fixing that and importing jQuery module before semantic-ui it works. You can open development tools in the browser and check the console for errors in javascript (F12 in Chrome).
<script type="text/javascript">
$(document).ready(function() {
window.onload = function(){
$('.ui.accordion').accordion();
};
});
</script>
Can anyone tell me in the simplest code possible, how to load and unload an html page into a div named "myDiv", with a simple click?
When i press another button on my navigation menu, i will then unload "myDiv" and replace with another page.
Whats the setup for this?
edit
I have 3 pages (page1.html, page2.html, page3.html)
My navigation is as follows:
<ul>
<li></li>
<li></li>
<li></li>
</ul>
I am trying to load those pages into "myDiv", each page replacing the previous loaded page everytime i click a different page button. Thats all.
I hope i made what im trying to do clear as crystal and hopefully not leaving anything important out.
Assuming you can use javascript/jQuery (you don't give a lot of info on your environment)...
Have a look at the jQuery load() method.
http://api.jquery.com/load/
<div id="myDiv"></div>
<button id="myButton">Click Me</button>
<script type="text/javascript">
$( document ).ready( function() {
$( '#myButton' ).click( function() {
$( '#myDiv' ).load( 'test.html' );
});
});
</script>
That should do your load. I'll leave the rest to you :)
EDIT:
OK, something more along the lines of what you're looking for...
Assuming you can modify the markup and add a class attribute to your a elements...
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<script type="text/javascript">
$( document ).ready( function() {
$( 'a.dynamicLoad' ).click( function( e ) {
e.preventDefault(); // prevent the browser from following the link
e.stopPropagation(); // prevent the browser from following the link
$( '#myDiv' ).load( $( this ).attr( 'href' ) );
});
});
</script>
So any 'a' element with the class of dynamicLoad will trigger this when clicked. We don't want the browser to try and follow the link, so we use preventDefault() and stopPropagation(). The only other difference is that we're not statically loading "test.html". We're determining what html page to load by using jQuery's $( this ), which represents the element that triggered the function. Use the attr() method, which returns the value of a specific attribute of the element. In this case, the href attribute.
Questions?