I have used this script and I was wondering if it's possible to prevent the dragging of image when it is at the edge of the div window inside html?
Here is the link:
<https://jsfiddle.net/61t6nn4a/2/>
Any tips would be awesome thank you.
You can make your life easier by using jQuery.
jQueryUI has a draggable functionnality, check the documentation here : http://api.jqueryui.com/draggable/
HTML:
<div class="container">
<img src="http://www.zpixel.com/staging/test/image.png" class="dragme">
</div>
JS:
$(".dragme").draggable({
containment: ".container"
});
Here is the JSFiddle : https://jsfiddle.net/v28r9v3r/1/
I want to make a simple sliding Div over another div.
This Fiddle is exactly what I want to make, but since I'm new in this world of coding, I get the warning Uncaught ReferenceError: $ is not defined after copying the codes to my own files.
<div class="hidden" id="slide">INFORMATION ABOUT IMAGE APPEARS ON CLICK</div>
<div class="image"><br>THERE'S A NICE IMAGE HERE</div>
$(document).ready(function() {$('#slide').click(function() {
var hidden = $('.hidden');
if (hidden.hasClass('visible')) {
hidden.animate({"top": "160px"}, "slow").removeClass('visible');
}
else {
hidden.animate({"top": "0px"}, "slow").addClass('visible');
}
});
});
I now understand that I have to link a/several (?) file(s) in my HTML head to define my $. Can someone please help me find the right files and tell me how to link these into my html?
It seems you're using jQuery and didn't import it.
You need to add the jQuery library before being able to use it :
<script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
The (single) jQuery distribution file, available here or on several CDNs.
Here's the code in your question, with jQuery added, just to show that it no longer complains about $ not being defined. It still doesn't work, because it's really hard to click a hidden element, but it's a step forward.
$(document).ready(function() {
$('#slide').click(function() {
var hidden = $('.hidden');
if (hidden.hasClass('visible')) {
hidden.animate({
"top": "160px"
}, "slow").removeClass('visible');
} else {
hidden.animate({
"top": "0px"
}, "slow").addClass('visible');
}
});
});
<div class="hidden" id="slide">INFORMATION ABOUT IMAGE APPEARS ON CLICK</div>
<div class="image">
<br>THERE'S A NICE IMAGE HERE</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
I recommend working through tutorials, which can introduce concepts, etc. SO is for Q&A.
You need to load jQuery before using $
try adding this before you use jQuery
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
Add Jquery like in the photo, or add it as external resource
I was hoping someone could help...I'm new to Jquery ....all I want to achieve is a click through on a hyperlinked image but this occurs when a completely separate div on another part of the page is clicked on rather than the hyperlinked image I just mentioned. .......the hyperlinked image needs to be invisible also. In case anyone is wondering why I need this ....it's because I want my own custom button rather than the standard one that comes with a CMS that I'm using and it can't be changed....it's basically a work around the owners of the system suggest.
Here's what I thought would work
<style>
#my-custom-button{
margin: 0 auto;
width: 200px
}
#the-standard-button{
display : none
}
</style>
<div id="my-custom-button">
<img src="../images/order-now.png">
</div>
<div id="the-standard-button">
<?php
proprietary PHP here that renders the standard button
?>
</div>
<script type="text/javascript">
<!--
$(function(){
$("#my-custom-button").click(function(){
$("#the-standard-button").click();
});
});
-->
</script>
The whole
<?php propiertary blah blah ?>
makes it hard to decipher but my guess is that the handler is being generated for whatever is being created by php, i.e. the php generates
<button id="phpButton">
blah
</button>
and then a handler like
$("#phpButton").click(....)
Notice that the handler is NOT on "#the-standard-button". So, you need make sure that you are using the correct selector when calling the click() in $("#my-custom-button").click(...)
Check out this jsFiddle. Notice which secondary click event is fired.
I'm not sure I understand your question perfectly, if what you want is that when You click on one button it will act as though the other was clicked.
Here is a solution that will work IF the default button is also an anchor tag (<a>)
HTML:
<div id="newButton">
<img src="/theimage.jpg"/>
</div>
<div id="oldDiv">
<img src"oldImage.png"/>
</div>
JQuery:
jQuery(document).ready(function($){
$("#oldDiv").hide();
$("#newDiv > a").click(function(){
window.location = $("#oldDiv>a").attr("href");
});
});
I want to expand the collapsible content of a jQuery Mobile collapsible content section. I know I can click the heading to expand it, but I don't want to rely on the user to click the same section every time the page refreshes. I know I can set a variable in the html, but that won't do because the collapsible content will still close on postback.
I need this to be done with code rather than by the user. You can see my failed attempt below. I used the template from VS 2013's Web Forms project as a start then I added jQuery Mobile and followed the instructions from jQuery Mobile's site, or so I thought. This is a simplified test page but ultimately, I want to have an ASP.NET variables to detect whether, on postback, a section has already been clicked and if a collapsible section has already been clicked, open it again so the user doesn't have to click the same place again. Is there any way to persist the expanded state or dynamically expand jQuery Mobile's collapsible content?
<%# Page Title="Home Page" Language="VB" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.vb" Inherits="ExpandTest._Default" %>
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<script>
$(".myDiv").trigger("expand");
</script>
<div class="jumbotron">
<h1>ASP.NET</h1>
<p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.</p>
<p>Learn more »</p>
</div>
<div class="row">
<div class="myDiv" data-role="collapsible">
<h2>Getting Started</h2>
<p>ASP.NET Web Forms lets you build dynamic websites using a familiar drag-and-drop, event-driven model. A design surface and hundreds of controls and components let you rapidly build sophisticated, powerful UI-driven sites with data access.
</p>
<p>
<a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301948">Learn more »</a>
</p>
</div>
</div>
</asp:Content>
-- EDIT --
Thing I have tried (even just for proof of concept) that fail:
$(".myDiv").trigger('expand'); // Apparently does not execute
$('.myDiv').on("click", alert("Fe Fi Foo Bar!");); // does not run anything within
$(document).on("pagecreate", function () {
Also, I have recently read that document.ready is supposed to be used for jQuery but not jQuery Mobile. Telling is the fact that I cannot use the same code that other user seem to think works and the same code that works in jsfiddle already. This leads me to believe I'm missing something that should be obvious. I have modified the order of loading jQuery Mobile in relation to the code to no avail.
Add an ASP.Net hidden field to the page with viewstate enabled.
The jQM collapsible has events for expand and collapse. On the client side, you can handle these events and create a list of the currently expanded collapsibles, and save this list to the hidden field. After postback, client code in the pagecreate event can read the list from the hidden field and expand those items.
Assign IDs to all the collapsible divs, then you can save a comma delimited list of IDs to the hidden input:
$(document).on("pagecreate", "#page1", function(){
var prevExpanded = $("#hidden").val().split(',');
$.each( prevExpanded, function( key, value ) {
$("#" + value).collapsible( "option", "collapsed", false );
});
$( "[data-role=collapsible]" ).on("collapsiblecollapse collapsibleexpand", function( event, ui ) {
GetAllExpanded();
});
});
function GetAllExpanded(){
var AllExpanded = [];
$( "[data-role=collapsible]" ).not(".ui-collapsible-collapsed").each(function( index ) {
AllExpanded.push($(this).prop("id"));
});
$("#hidden").val(AllExpanded.join(','));
}
Use <asp:hidden> fields, and on expand change their values. Then you will be able to set the value of $(".col-md-4").trigger("expand"); on postback.
Well the following works, although I'm still at a loss as to better ways that work on Web Forms and I'll have to find a way to conditionally load this, perhaps using hidden fields as suggested earlier. Thanks for the help.
<script type="text/javascript">
$(function () {
$("h2.ui-collapsible-heading").trigger("click");
});
</script>
I'm using a custom jQuery 1.10.3 theme. I downloaded every straight from the theme roller and I have intentionally not changed anything.
I created a dialog box and I get an empty gray square where the close icon should be:
I compared the code that is generated on my page:
<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
<spanid="ui-id-2" class="ui-dialog-title">Title</span>
<button class="ui-dialog-titlebar-close"></button>
</div>
To the code generated on the Dialog Demo page:
<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
<span id="ui-id-1" class="ui-dialog-title">Basic dialog</span>
<button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-dialog-titlebar-close" role="button" aria-disabled="false" title="close">
<span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span>
<span class="ui-button-text">close</span>
</button>
</div>
EDIT
The different parts of the code are generated by jQueryUI, not me so I can't just add the span tags without editing the jqueryui js file which seems like a bad/unnecessary choice to achieve normal functionality.
Here is the JavaScript used that generates that part of the code:
this.element.dialog({
appendTo: "#summary_container",
title: this.title(),
closeText: "Close",
width: this.width,
position: {
my: "center top",
at: ("center top+"+(window.innerHeight*.1)),
collision: "none"
},
modal: false,
resizable: false,
draggable: false,
show: "fold",
hide: "fold",
close: function(){
if(KOVM.areaSummary.isVisible()){
KOVM.areaSummary.isVisible(false);
}
}
});
I'm at a loss and need help.
I am late to this one by a while, but I'm going to blow your mind, ready?
The reason this is happening, is because you are calling bootstrap in, after you are calling jquery-ui in.
Literally, swap the two so that instead of:
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="js/bootstrap.min.js"></script>
it becomes
<script src="js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
:)
Edit - 26/06/2015 - this keeps attracting interest months later so I
thought it was worth an edit. I actually really like the noConflict
solution offered in the comment underneath this answer and clarified
by user Pretty Cool as a separate answer. As some have reported issues
with the bootstrap tooltip when the scripts are swapped. I didn't
experience that issue however because I downloaded jquery UI without
the tooltip as I didn't need it because bootstrap. So this issue never
came up for me.
Edit - 22/07/2015 - Don't confuse jquery-ui with jquery! While
Bootstrap's JavaScript requires jQuery to be loaded before, it doesn't rely on jQuery-UI. So jquery-ui.js can be loaded after bootstrap.min.js, while jquery.js always needs to be loaded before Bootstrap.
This is a comment on the top answer, but I felt it was worth its own answer because it helped me answer the problem.
If you want to keep Bootstrap declared after JQuery UI (I did because I wanted to use the Bootstrap tooltip), declaring the following (I declared it after $(document).ready) will allow the button to appear again (answer from https://stackoverflow.com/a/23428433/4660870)
var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton // give $().bootstrapBtn the Bootstrap functionality
This appears to be a bug in the way jQuery ships. You can fix it manually with some dom manipulation on the Dialog Open event:
$("#selector").dialog({
open: function() {
$(this).closest(".ui-dialog")
.find(".ui-dialog-titlebar-close")
.removeClass("ui-dialog-titlebar-close")
.html("<span class='ui-button-icon-primary ui-icon ui-icon-closethick'></span>");
}
});
I found three fixes:
You can just load bootsrap first. And them load jquery-ui. But it is not good idea. Because you will see errors in console.
This:
var bootstrapButton = $.fn.button.noConflict();
$.fn.bootstrapBtn = bootstrapButton;
helps. But other buttons look terrible. And now we don't have bootstrap buttons.
I just want to use bootsrap styles and also I want to have close button with an icon. I've done following:
How close button looks after fix
.ui-dialog-titlebar-close {
padding:0 !important;
}
.ui-dialog-titlebar-close:after {
content: '';
width: 20px;
height: 20px;
display: inline-block;
/* Change path to image*/
background-image: url(themes/base/images/ui-icons_777777_256x240.png);
background-position: -96px -128px;
background-repeat: no-repeat;
}
This is reported as broken in 1.10
http://blog.jqueryui.com/2013/01/jquery-ui-1-10-0/
phillip on January 29, 2013 at 7:36 am said: In the CDN versions, the
dialog close button is missing. There’s only the button tag, the span
ui-icon is missong.
I downloaded the previous version and the X for the close button shows back up.
I had the same exact issue, Maybe you already chececked this but got it solved just by placing the "images" folder in the same location as the jquery-ui.css
I got stuck with the same problem and after read and try all the suggestions above I just tried to replace manually this image (which you can find it here) in the CSS after downloaded it and saved in the images folder on my app and voilá, problem solved!
here is the CSS:
.ui-state-default .ui-icon {
background-image: url("../img/ui-icons_888888_256x240.png");
}
I know this question is old but I just had this issue with jquery-ui v1.12.0.
Short Answer
Make sure you have a folder called Images in the same place you have jquery-ui.min.css. The images folder must contains the images found with a fresh download of the jquery-ui
Long answer
My issue is that I am using gulp to merge all of my css files into a single file. When I do that, I am changing the location of the jquery-ui.min.css. The css code for the dialog expects a folder called Images in the same directory and inside this folder it expects default icons. since gulp was not copying the images into the new destination it was not showing the x icon.
Even loading bootstrap after jquery-ui, I was able to fix using this:
.ui-dialog-titlebar-close:after {
content: 'X' !important;
position: absolute;
top: -2px;
right: 3px;
}
I'm using jQuery UI 1.8.17 and I had this same issue, plus I had additional css stylesheets being applied to things on the page, including the
titlebar color. So to avoid any other issues, I targeted the exact ui elements using the code below:
$("#mydialog").dialog('widget').find(".ui-dialog-titlebar-close").hide();
$("#mydialog").dialog('widget').find('.ui-icon ui-icon-closethick').hide();
Then I added a close button in the properties of the dialog itself:
...
modal : true,
title: "My Dialog",
buttons: [{text: "Close", click: function() {$(this).dialog("close")}}],
...
For some reason I had to target both items, but it works!
A wise man once helped me.
In the folder where jquery-ui.css is located, create a folder named "images" and copy the below files into it:
ui-icons_444444_256x240.png
ui-icons_555555_256x240.png
ui-icons_777620_256x240.png
ui-icons_777777_256x240.png
ui-icons_cc0000_256x240.png
ui-icons_ffffff_256x240.png
and the close icon appears.
As a reference, this is how I extended the open method as per #john-macintyre's suggestion:
$.widget( "ui.dialog", $.ui.dialog, {
open: function() {
$(this.uiDialogTitlebarClose)
.html("<span class='ui-button-icon-primary ui-icon ui-icon-closethick'></span><span class='ui-button-text'>close</span>");
// Invoke the parent widget's open().
return this._super();
}
});
just add in css
.ui-icon-closethick{
margin-top: -8px!important;
margin-left: -8px!important;
}
If you are calling the dialog() inside the js function, you can use the below bootstrap button conflict codes
<div class="row">
<div class="col-md-12">
<input type="button" onclick="ShowDialog()" value="Open Dialog" id="btnDialog"/>
</div>
</div>
<div style="display:none;" id="divMessage">
<table class="table table-bordered">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Giri</td>
<td>Prasad</td>
<td>25</td>
</tr>
<tr>
<td>Bala</td>
<td>Kumar</td>
<td>24</td>
</tr>
</table>
</div>
<script type="text/javascript">
function ShowDialog()
{
if (typeof $.fn.bootstrapBtn =='undefined') {
$.fn.bootstrapBtn = $.fn.button.noConflict();
}
$('#divMessage').dialog({
title:'Employee Info',
modal:true
});
}
</script>
Just add in the missing:
<span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span>
<span class="ui-button-text">close</span>
I am having this issue as well. Here is the code that is getting inserted for the close button:
When I turn off the style="display:none:" on the button, then the close button appears. So for some reason that display:none; is getting set, and I don't see how to control that. So another way to address this might be to simply override the display:none. Don't see how to do that though.
I note that the answer posted by KyleMit does work, but makes a different looking X button.
I also note that this issue does not affect all dialogs on my pages, but just some of them. Some dialogs work as expected; other have no title (ie, the span containing the title is empty) while the close button is present.
I am thinking something is seriously wrong and it might not the time for 1.10.x.
But after further work, I discovered that in some cases the titles were not getting set properly, and after fixing that, the X close button reappeared as it should be.
I used to set the titles like this:
('#ui-dialog-title-ac-popup').text('Add Admin Comments for #' + $ac_userid);
That id does not exist in my code, but is created apparently by jquery from ac-popup and ui-dialog-title. Kind of a kludge. But as I said that no longer works, and I have to use the following instead:
$('.ui-dialog-title').text('Add Admin Comments for #' + $ac_userid);
After doing that, the missing button issue seems to be better, although I am not sure if they are definitely related.
I was facing same issue , In my case JQuery-ui.js version was 1.10.3, After referring jquery-ui-1.12.1.min.js close button started to visible.