At the moment I am working on a medialibrary in the Laravel framework.
I am looking at WordPress with a users-experience point of view.
The tab Media Library shows the images which you can select.
I've checked TWO images (Shift + click) within "Insert Media"
I switch to "Featured Image" and check ONE image for Featured Image.
When I switch back at Insert Media it remembers the two previously selected images and forgets the checked Featured Image.
How does WordPress "remember" what images are checked in Insert Media view. Is that a Backbone view they're using with some data stored in a model? Because each time I switch between Insert Media and Featured Image the UL element is changing it's id attribute: (__attachments-view-xxx).
When I just use plain javascript, could I put some ID's in an associative array instead? It means that each time I switch back to Insert Media, I need to find the corresponding images to re-check them? What if you have hundreds of media-items to search each time...
I have the feeling the Underscore library might be helpfull somehow as a good alternative but haven't figured out how to use it to make everything as smooth and fast as possible... It looks WordPress isn't even "refreshing" the media items. Could anyone give me some advice to mimic this behaviour?
A simple way would be:
each item in the gallery view has a unique id (for example the actual ID from wordpress). It can be stored as a data-attribute or the html id attribute for example.
you then have separate arrays that store the IDs of selected items for each tab (insert media / featured image)
when user clicks an item, the ID of that item is added (or removed) to the corresponding array for the tab he's viewing
when the user switches tabs you first deselect everything in the gallery (remove the class that marks them as selected), then go through your corresponding array and re-select what's in that list.
Of course, I'm sure Wordpress is doing something much more refined, like storing a list of all the images it got from the AJAX request as objects, then doing these operations on that list and also showing/hiding items in the gallery view based on what tab you select. But the general idea is the same.
Related
I have an image slider where the class name 'current' changes when the next and previous buttons are clicked to display the current image. I wanted to create a separate Overview page which displays all the images in a grid, then when an image is clicked you are directed to the Slider page, and the selected image has the class of 'current'.
Because I can't access and add/remove the 'current' class from my Overview page, I'm not sure how to achieve the functionality I'm looking for. I'm hoping there's a way to load the Slider page and pass in a function which alters the class names on the page you're directed to.
Any help or suggestions on a different way to approach this would be appreciated.
Also, this is just using Vanilla JS. I'm relatively new and still trying to understand the basics.
Thanks!
The easiest solution that comes to mind is using GET parameter: https://example.com/overview?currentimage=1. This way you include the image id in the url and can act accordingly on the overview page. This however works only as you open the new page.
If you'd like the image to change in real time on the overview page as it changes on the slider, you have to look into cookies, session, and/or HTML5 Web Storage. These allow you to store and share data across multiple pages. You update the cookie/session/storage on slider change, and then retrieve the data on the overview page with a loop that checks for changes every second or two, and updates the grid.
My website has individual pages for members, but I have a select menu used to scroll from one member to the other. I have the select menu coded in the html on every page, but I need a better solution since my membership is growing.
I need to be able to create that same select menu in a separate file with the ability, when selected to jump to another member page, have that embedded in the body where I need it so that all I have to do is alter/ update the external file and it'll be done for all the member pages.
I've looked into javascripting it, mysqling it, but can't find (looking on youtube) a code to exactly help me in what I need.
My typical code for the select
//(select.....
//(option value="http:www.website-Profile-blahblah.html.... so on and so forth.
I need to pull this from an external file to use across the board and place it in the body where I need it.
thanks for any help you can offer.
In general this sounds like something you should be using a back end rendering engine for. As far as the select goes, this would be a great place to use a dropdown menu such as the one provided by bootstrap since clicking a select won't actually move you to another page.
If you dont want to use/can't use a back end rendering engine to render the options, I would suggest looking at angular.js which has a great ng-repeat and ng-option feature that would allow you to dynamically build the select/dropdown with as many users as you want.
angular ng-repeat page: https://docs.angularjs.org/api/ng/directive/ngRepeat
bootstrap dropdown: http://www.w3schools.com/bootstrap/bootstrap_dropdowns.asp (note the a tags could go directly to the user's page)
From experience in cases like this, it is much easier to have an SQL table to store the links you would like to use. The next thing to do is to have your back-end send you the list of links. With this, you can dynamically create the option tag and append it to your select tag. functions like newOptionTag.setAttribute('value', 'url'),document.createElement('option') and selectElement.appendChild(newOptionTag) should help you on your way
If you really want to use a seperate file, you could store the membernames and links in a json file. On document load get the file, parse it, then use the object to build the options.
The w3schools website (though frowned upon by some) has a json tutorial and an example that is already halfway there.
EDIT: I see it actually uses mysql to build the json file...
We are using Chosen Javascript plugin http://harvesthq.github.io/chosen/ . It works great except one issue. When it loads on the page, it shows the "list box" kind of view for few split seconds in place of the Chosen plug in. It loads to the chosen plug in "view" finally. But for that few moments it looks bad with all the data showing as items in list box. For example, if we have a Chosen Plug in control linked to a list of States in US. When this page loads, for a split second, it shows a list box (not the chosen plug in) and it shows all the items in the list (list of states etc) .. then after the page loads completely, it will render the Chosen Plug in with blank items as its supposed to.
Is there any setting I can make use of to fix this? Any work arounds? Causes? Any one encounter this before? Thanks for the help.
You could potentially set the style display:none; on the element and then display it once chosen loads.
I'm working on the front-end of my project and doing the back-end later. I've ran into a snag though. I have a list of DIVs (want them to be collapsible as well) that are suppose to show various apartments around a given zip code. Problem is, I don't know where to go to look for these things:
Firstly, I wish to sort these divs by name or ranking.
Secondly, I
want to be able to search these results and toss out the ones that
they do not want, i.e. I type in A, all apartments that begin with
letters B-Z disappear in the list. I think in p after A, all Aa-Az
letters disappear from the list, etc.
Thirdly, should I use jQuery to paginate my results or should I use PHP instead?
Lastly, I have a filter box. I want to do the same as above except with different selectable options (on the fly using AJAX). User selects, 1 to 3 bedroom apartments, no pets,
and hits filter... boom, list of apartments with values.
Is there anything that I can use using jQuery/Javascript to speed up this process that also degrades when Javascript's disabled? I know this sounds like a lot, but any help would be greatly appreciated.
Well for this to work without javascript, and still behave like you want, i guess you have to build this in pure old html (with form post's / links) and then add jquery ajax functionality to make it prettier and faster when javascript is enabled.
If i were doing this, i would build it with form post's that return the whole page (when javascript is disabled) and add jquery events on page load to prevent default form post and instead use ajax post to only partial load your pages and aply transition effects.
One last thing, if you have a lot of data to show on page use pagination and sorting at database level, return only the visible content of your page. This will work with and without javascript, and is scalable (with lots of results it becomes unmanageable to it in javascript)
I am developing a retail store website and am using an html page with JavaScript. I want to use iFrames. The main page (Page1) is made up of a banner, a menu on the top and an iFrame below. For clarity I will call this iFrame1. In iFrame1 I have an html page (Page2) that contains another iFrame. I will call this iFrame2.
Page 1 has a top level menu detailing departments for example curtains, cushions, clothes etc. Selecting one of these items brings up another page (Page2) with a 2nd level menu based upon the selection within the first menu and a ListView of relevant sub headings and images pulled from the database. Making a selection from the menu in Page2 will change the “Where~ clause in the Select SQL statement and bring up different items for example types of curtains, colours of cushions, sizes available etc.
What I am looking for is a way to automatically resize both iFrames depending on the number of items that are displayed in the ListView in Page2.
Im not exactly familiar with iframe's (except for all the people telling me not to use them). So might i suggest using ajax instead with div's? (please correct me if im wrong in suggesting this)
You could define a scrollbar to appear instead of trying to automatically resize an iframe. What you're describing sounds messy though, and iframes there are many reasons why not to use iframes (http://blondish.net/iframes-why-not-to-use-them/). Try divs, and dynamically including the content?