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')
};
Related
I am trying to create a javascript bookmark that will remove a side navbar from a website that I use, but cannot seem to be able to remove it.
The navbar element id I would like to hide is is:
ul.nav.navbar-nav.side-nav.col-md-2
I have tried a few ways from researching online, but with no luck. How can I accomplish this?
Here is my attempt:
javascript:(function(){('ul.nav.navbar-nav.side-nav.col-md-2').hide()})();
This is an internal portal website that I use.
I am trying to modify/remove the menu once the site is loaded via the browser in the form of a javascript bookmarklet, and am not editing the site's code myself.
Without an example of the problem or website it won't be very clear/easy for anyone to help.
But one obvious issue I see is that you are not actually referring to an element directly, you just placed a CSS selector in brackets:
('ul.nav.navbar-nav.side-nav.col-md-2')
You probably want to use jQuery to get the element:
$('ul.nav.navbar-nav.side-nav.col-md-2')
Or if jQuery is not available:
document.querySelector('ul.nav.navbar-nav.side-nav.col-md-2').style.display = 'none';
I'm creating an app using phonegap that pulls the majority of its content from a database. It has a few hundred pages so I thought the best option would be to use a single page solution and just keep loading content into the main div when needed.
I have tried using Handlebars to do this but I'm not sure if that was the best solution as I cant get jquery mobile working with it (the app needs lots of accordions). Have also tried creating my own very simple accordions but failed dismally to even get an onlcick event working within the handlebars script tags.
Can anyone recommend a build that would be good for this job please? Or guide me to some example solutions that are along these lines?
I have googled extensively for 2 days now and have tried quite a few suggestions out but no success so decided to post here.
Many thanks
Generate all the content into your div, but using css hide almost all of them. As the user does what needs to be done to activate your paging call the show() function for the first 10 elements, if you consider 10 to be a page.
Use List View pattern of jquery
// adding data on list view
$('#list_view').append('<li >' your data '</li>');
//refreshing list
$("#list_view").listview("refresh");
//removing elements from list
$("#list_view").empty();
You can use multiple div's as well in the list view
use below link for more:
http://api.jquerymobile.com/listview/
I'd like to know how can I create a system using HTML, CSS and jQuery that simulates a multipage website using a single HTML page. One example of this feature is used in this website.
Is there a plugin to create this effect and transition?
the website link you have given here is actually a single page. There are many plugins to achieve what is happening there. one of them is
reveal.js it also has an online presentation creator present here
other one is impress.js but IE isnt supported
I'm having trouble figuring out where I am going wrong with my JQuery Mobile site. I have a link to another JQuery Mobile page that uses a querystring. The link looks like this.
<li>News</li>
All normal internal JQuery Mobile links do not produce the problem. Only links that go to another JQuery Mobile page with a querystring produce this problem. The problem is when the above link is clicked my dom goes from looking like this.
To looking like this.
Images are hard to see on SO, so here they are on imgur.
http://imgur.com/a/2Z1Ss
These are firebug DOM views of what the initial page and second page looks like. My question is why are there now two DOM element with the same exact ID? This is, and correct me if I'm somehow wrong, not a valid HTML page once this link has been clicked. If I am using querystrings in JQuery Mobile, then what best practice am I missing that is causing this problem?
What do I need to do to avoid the multiple ID's on the same page as they are causing problems with my javascript functions. I'm baffled by this problem, but hopefully some JQM pro can explain to me what I'm doing wrong. I'm sure it's something silly.
As I thought I was doing something silly. My index.php had a page with id="frontpage" along with my section.php had a page with id="frontpage". I just gave the section.php page a new id and the page is now valid and my functions work properly.
I have made a basic tabbar view app in xcode but I need it to be a webapp as I will be viewing the data from a server so do not need/ want it on the app store.
I've looked at some other questions with this kind of topic and nothing is relevant. Also I've done plenty of googling and looking into other code plus using things like cubiq.org's slide-in menu.
I really want that tabbar look. I've tried to do this in HTML with images as buttons and using frames but (I think) because I'm using the JS code to stop the UIview from moving (to look more native) it seems that the buttons open the link in a new page, or switch to Safari, rather then open them in the same frame as they would in a regular browser.
Alternatively, does anyone know of a way I can implement a taskbar in a webapp?
Regards,
Eric.
Have you seen JQuery Mobile !?
It's awesome... but still in Beta.
They have precisely the toolbar you're looking for: JQuery Mobile Navbar
Without code, it's hard to pinpoint your problem exactly, but you should not be doing:
Text of Button
Because the above code will actually load a different page. Rather, you want:
<div class="some_button_type" onclick="doSomeAction()"><!-- ... --></div>
And that "doSomeAction()" function should use DOM manipulation to transform the current page to look like whatever you want it to look like (rather than navigating to some separate page).
P.S. I'm assuming you have some CSS styling based on class type, and you might want content in the DIV (for example, for the text of the button). I've also omitted some attributes (e.g. "role") that you want.