There's this website I'm developing which can be found here. It's a photography website and my client asked for me to implement something that would allow her to move the photos around and change the order of which they appear. They come from a MySQL database and are displayed with jQuery Masonry.
I thought instantly of jQuery UI Sortable, and I've been trying to implement it with absolutely no luck at all.
How can I achieve this? Can someone point me in the right direction, please?
Thanks in advance!
I am struggling with the same issue, so far my answer has been to change classes with jquery's sortable start, stop, change and sort events. Like so:
$('#sortable').sortable({
start: function(event, ui) {
console.log(ui);
ui.item.removeClass('masonry');
ui.item.parent().masonry('reloadItems')
},
change: function(event, ui) {
ui.item.parent().masonry('reloadItems');
},
stop: function(event, ui) {
ui.item.addClass('masonry');
ui.item.parent().masonry('reloadItems');
});
Here is a working example and a JS Fiddle on the subject. It's a start.
However, this is not a 'presto' solution, this examples work with older versions of masonry, the latest version has a few bugs implementing it since the "reload" method was replaced with layout() and reloadItems().
Or... you can use the old masonry versions, if it works for you.
Alternatively you can use jQuery.Shapeshift(), which does basically what you're looking for.
Related
I've been searching for an hour on how to nagivate within my Laravel website without refreshing the website (page layout), but I couldn't find a proper solution: one that not just loads the HTML, but actually replaces the content view within the layout.
This is my current dashboard:
So when clicking on a menu item within the blue area, I want the red content area to change without page refresh. What would be a scalable solution for this? I'm trying to follow the DRY (Don't repeat yourself) principle as much as possible.
Oh, please don't mark this topic as a clone of other topics as I've seen most of them but without proper solution. Hope anyone can help me out.
Changing a view without page load means we need to use the ajax techology. Vuejs is a frontend frameework the allows us to acomplish that easily with its axios library
I believe you can get this done by using jQuery load function -
$(function () {
$("#menu_option_a").on("click", function () {
$("#dashboard").load("View1.html");
});
$("#menu_option_b").on("click", function () {
$("#dashboard").load("View2.html");
});
});
I've added a plugin that allows the user to add a specially styled div via a dialog. The issue now is, this element should not be clickable inside the edtior. The problem is the users manage it to click inside the div and enter text there and by this screw it up.
I've already spent some time searching the documentation but couldn't find the right approach to do this yet. I'm not asking for code, just some advice how to do it, a pointer to the right API method would be good enough for me. I guess I can somehow access the elements or intercept an users click and prevent them from adding something to my element somehow, I just couldn't yet figure out how to do it.
Use the Widget System.
Widget Tutorial.
Demos.
I've finally managed to get this done by making the elements content not editable. When I create the element in my dialog:
hrElement.setAttribute('contenteditable', false);
When loading the plugin:
init: function (editor) {
editor.on('contentDom', function () {
var stiching = (this.document.getElementsByTag('div'));
console.log(stiching);
for(var i=0;i<stiching.count();i++){
if (stiching.getItem(i).hasClass('stitching')) {
stiching.getItem(i).setAttribute('contenteditable', false);
}
}
});
}
I'm pretty sure this is not the most best solution (don't like to iterate over the elements) but at least it works for me now. Any suggestions how to improve it for future cases are welcome.
firstly i understand that there are many questions on here about the same subject and yes i have read most of them, unfortunately i just cant seem to process the information to make it work,so i was hoping someone could possibly point me in the right direction to help me solve my issue out??
firstly the set up of the directories of my site, i have all different sections that are 'included' amongst each other to keep my site more simple when changes are needed, but my point is.. in my overall footer.php page i have 2 just before the tag they are
<script type="text/javascript" src="jquery/jquery-1.9.0.js"></script>
<script type="text/javascript" src="js/general.js"></script>
the general.js file is from a tutorial i seen which made it alot easier to have all the things in the same one place of there own.
So what i want is to refresh/reload a div id="menu_bar" with a navin which is for my menu at the top of the screen, on there i have a inbox system set up and that is the reason i would like to have this auto refresh, so it will basically show me i have a message instead of me just pressing F5 to check. plus i plan making a notification system and im guessing this would be an appropriate way to show that i have notifications... So as im very very VERY new to jquery, AJAX and most other things this stuff doesnt make too much sense, i get a bit, but still... so the code i have seem to put together from a variety of tutorials and here is what ive got ...
$(document).ready( function(){
$('#menu_bar').load('includes/menu.php');
refresh();
});
function refresh()
{
setInterval( function() {
$('#menu_bar').fadeOut('slow').load('includes/menu.php').fadeIn('slow');
refresh();
}, 3000);
}
So can someone help me by showing where ive gone wrong and WHY ive gone wrong so i can try to understand where i went wrong and how i should fix it? cheers
You shouldn't call refresh() inside the setInterval function,or use setTimeout instead
I have button with id = new which loads the new page
$("#new").click(function(){
$('#message_area').load('new.php');
});
There is a button in new.php which sends message to database. But i have a problem with it , it only works for first time when page loads if i navigate to some other links via ajax and again load new.php using above code then send button in new.php does not work i have to refresh the page then it works. I think its because the send button in new.php is added after DOM is created for first time .
Please help Thanks in advance ..
You will need to post more details of your markup for a more accurate answer, but the general idea is to use event delegation. Bind the event handler to an ancestor of the button that does not get removed from the DOM. For example:
$("#message_area").on("click", "#yourButton", function() {
//Do stuff
});
This works because DOM events bubble up the tree, through all of an elements ancestors. Here you are simply capturing the event higher up the tree and checking if it originated from something you are interested in (#yourButton).
See jQuery .on for more. Note that if you're using a version of jQuery below 1.7, you will need to use delegate instead.
//jquery >= v1.7
$("body").on('click', '#new', function(){
$('#message_area').load('new.php');
});
//jquery < v1.7
$("#new").live('click',function(){
$('#message_area').load('new.php');
});
$("#new").live("click", function(){
$('#message_area').load('new.php');
});
just realized this was deprecated-- should be using on instead.. my bad.
To manage dynamically created elements like this, you need to use .on() (jQuery 1.7 and above) or .delegate() (jQuery 1.4.3 and above) to assign the events. Seems everyone has beaten me to the code, but I'll post this for the links to the functions.
I am using jquery colorbox and jquery date picker. My problem is date picker doesn't work in my popup window using jquery colorbox. I tried to used outside colorbox and its work fine.
Any help would greatly appreciated.
I tried the code below but still doesn't work.
onLoad: function(){
$('#date-pick').datepick();
},
I think you may write these codes $('#date-pick').datepick(); in colorbox's onComplete function. When all dom elements are ready then the code will work.
Well, for starters, to create the datepicker with jquery-ui its:
$("#datepicker").datepicker();
It may well be something else, but you really haven't shown us much. I don't even know if you're using the jquery-ui datepicker as you've provided very little information in your question.