I have a resume displayed on a web page. which contains sections (paragraphs) like education, experience, projects etc, here client wants to move these sections on the page by dragging mouse on the paragraphs(sections) of web page. how can i implement this feature. I am using ruby on rails framework. is there any rails gem or jquery framework for achieving this task?
Yes, jQuery UI Sortable, try it: https://jqueryui.com/sortable/
If you have something like this:
<div id="sections">
<p>...</p>
<p>...</p>
<p>...</p>
</div>
Then all you need to do is to install Sortable and:
$( "#sections" ).sortable();
You can find full API documentation here: http://api.jqueryui.com/sortable/
And here's jQuery UI for rails: https://github.com/jquery-ui-rails/jquery-ui-rails
Related
We are using Bootstrap nav-tabs on our new website's events pages to create different sections on a single page related to our events — About, Speakers, Travel, Register and so on.
Our events coordinator would like to be able to link directly to the individual speakers who appear on the Speakers tab from outside the website. Normally, this is pretty simple — http://domain.name/events/eventspage#speakerID.
However, because we're using nav-tabs, there isn't an easy and obvious way of creating this link. I've looked through posts here and elsewhere to see if anyone else has addressed this problem, but have yet to find anything.
The site was built using Bootstrap 3 and uses ExpressionEngine 2.10 as the CMS.
You can view a working example of how our events pages are set up at https://www.rjionline.org/events/rjicollab.
Any suggestions would be appreciated.
This is how it can work with jQuery:
Select an anchor within a JQUERY Tab from a link on anther webpage
You can adapt the code from there.
Here you can try this function:
function goToTab(){
var hash=document.location.hash,
prefix="tab_";
if(hash)
$('.nav-tabs a[href='+hash.replace(prefix,"")+']').tab('show')
};
I am building a webpage using Bootstrap 3. I am trying to find the best way to change the main content of the side. I have a Header, left content and right content but I want to change the middle content by pushing a button without changing the surrounding elements. What would be the best thing to use to accomplish this. Is there some demos online that someone can point out? I have been trying to find some but without luck.
Bootstrap doesn't have that feature. First try to learn what bootstrap can do or can't, what bootstrap made for.
What you are trying to do is called templating. You can use php, ajax or other methods to dynamically add content to your content section of your template.
You have many ways to do that, maybe with jQuery .load() and maybe combined with HTML5 history API or some other framework...
But Bootstrap has nothing to do with that..
You can start reading about AJAX and DOM manipulation first, but here is some link you can use:
Dynamically Loading Content in Twitter Bootstrap Tabs
You cannot do that with boot strap that is just not what it's made for you can use either PHP or Ajax personally if you know PHP already and have everything set up for go with that because in my opinion Ajax sucks to learn and work with
For example, I have profile page and select with 'About', 'Photos', 'Videos' section etc., and I don't want to refresh page each time I change section, I want just to change the content of container with Javascript. Sure it wouldn't be handy to write markup of pages in Javascript file, and my idea would be to write div's of each view and display only one of them:
<div id="about>About content</div>
<div id="photos" style="display: none;">Photos content</div>
However, I think there are better ways to do it, because I don't like keeping hidden views on the page. Also in most cases content in views should be generated by script, so it's looks like job for a template engine, but I'm not sure there are such in Javascript.
So what would be the best way to implement this in Javascript. I hope my idea is clear. Thanks in advance!
Try use mustache it is a template engine for javascript.
Also, you can use AngularJS templates (dynamically loaded into page on demand)
It is very easy to use. (However contains other things you might not want.. but should want ;) )
Use jQuery to fetch for the views whenever the user clicks on a link.
For example, bind the click event:
$('#clickToSeePhotos').click(function(){
$('#photosContainer').load('pathTo/photos.html');
});
$('#clickToSeeAbout').click(function(){
$('#aboutContainer').load('pathTo/about.html');
});
Here is the html:
<a id="clickToSeePhotos" href="#">Photos<a/>
<div id="photosContainer"></div>
<a id="clickToSeeAbout" href="#">About<a/>
<div id="aboutContainer"></div>
Here is a link to jQuery's page where they provide more info and examples for load
http://api.jquery.com/load/
You may download the jQuery library and use it on your server. However, as #Cybrix suggests you can also point to the library hosted by Google. See this link. At the end this could improve performance for your users.
Jquery ui doesn't show examples of a tabbed content widget like the list on the right http://jqueryui.com/demos/tabs/#default where you choose examples (default functionality, content via ajax, etc)
Does anyone know how to create a similar tabbed content using jquery UI? No addition scripts.
From this question there is a link to vertical jQuery UI tabs demo.
Also Wijmo Open has added an alignment property to their jQuery UI based tabs if the no additional script constraint can be stretched.
I do believe you can use the jquery ui tabs script you linked to. Use CSS to get the tabs on the right hand side and vertical, instead of along the top and horizontal.
jQuery wise I see no difference. Its a styling thing.
It is not a widget itself but a combination of event handlers and CSS. You can check the source code of it:
http://jqueryui.com/js/demos.js
I'd like to say also that the AJAX content loading is not a great solution as it is used in jQuery UI demos, because they load content via AJAX and they update hash part or URL, but you can't go back in browser history and you can't enter directly to a demo by using a special hash.
Hello everybody and thanks for taking your time.
I got an existing project where the main-page uses a horizontal accordion for the main content area from jQuery Tools (the Tabs element).
Now i have to implement a Tabs-menu (into one of the existing accordion pages) which is build with jQuery UI (the main container are Tabs and inside of them are several nested accordions).
Is there any easy way I can solve this problem and combine jQuery Tools with jQuery UI?
I did a search-replace on the tabs code of jQuery UI (js+css) and changed everything from "tabs" to "tabsnew"..
The script seems to work with this, but the css is not working correctly with this (even tough I changed all elements which are used to build up the Tabs).. I think there must be an easier solution for this..
I'm very thankful for any ideas or solutions!
Drop jQuery UI and implement the tabs again in jQuery Tools. If this is production code for a website there's no reason the users should load both libraries.