I try to study a Bootstrap 3 last three months.
All fine, but I would like to put in my navbar the additional image (in right side of it).
In my opinion, to insert a picture directly in HTML code like:
picture
- bad idea, and I created a with a background picture, specified through CSS, but the picture does not appear on the page ...
How can I do it?
And possible whether to do it at all?
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="Brand" src="...">
</a>
</div>
</div>
</nav>
Follow this guide
http://getbootstrap.com/components/#navbar-brand-image
To have an additional image on the other side of the menu, you just need to put it as part of the link menu. See example:
http://jsbin.com/mupobo/edit?html,output
Related
I am using alvarotrigo full page js for wordpress. It works very fine, but there is only an issue for scroll.
As you may know, the basic structure is like this.
<div id="fullpage">
<div class="section">One</div>
<div class="section">
<div class="slide">Two 1</div>
<div class="slide">Two 2</div>
</div>
<div class="section">Three</div>
<div class="section">Four</div>
</div>
However there are sometimes a temporary (dynamic) div or script or style elementary by user's dynamic setting.
http://jsfiddle.net/97tbk/1477/
As you see there are 2 example elementary by user's dynamic settings and scroll is not working to move "four". because of temp style tags, clear div.
Isn't it possible to work scrolling only for "[div class="section"]..[/div]"?
then scroll doesn't need to care other elementary or html tags.
I have tried "sectionSelector". but it's not working for scrolling.
1 more question. The temp style is created by user's dynamic setting. Isn't it possible to move into <head>..</head> automatically? Maybe by script?
You shouldn't have anything between sections. fullPage.js requires a specific structure and you are not following it.
<div id="fullpage">
<div class="section">Some section</div>
<div class="section">Some section</div>
<div class="section">Some section</div>
<div class="section">Some section</div>
</div>
You should be asking yourself, why do you have those style tags in between sections and not directly in the <head> where they belong.
for some reason this navbar is not rendering correctly on the browser :
<header data-role="header">
<div id="navbar-personalize" data-role="navbar" class="my-navbar">
<div data-align="left">
<img src="../../Images/dashboard6.png" alt="Dashboard"/>
</div>
<span data-role="view-title">Cart Summary</span>
<div data-align="right">
<a href="#merchandise-otherorders-view">
<img src="../../Images/whoelse6.png" alt="Who else is going?"/>
</a>
</div>
</div>
</header>
I have other navbars just like this one all around my index file, and they all work fine, except for this one. It seems that KendoUI isn't initializing it all. By inspecting the code I can see that it's missing all of kendo's styling (like "km-navbar" and such).
It may have to do with the fact that I'm defining this header in each one of the views inside the file, instead of defining it in the app layout, but for some reason defining it inside the app layout doesn't work for me, it simply doesn't render at all.
I'm out of ideas, can somebody help me?
Thanks
I had this problem today. Make sure that kendo.mobile.min.js is included on your page. The docs don't say to put it in, but adding that made it work for me.
I'm currently creating a image gallery (using Zurb Foundation as Framework) and would like to show the zoom icon on image hover (like this example here: http://codepen.io/Twikito/pen/Jeaub). But I would like the icon to be a font (Font Awesome) icon and not just one but 3 individual clickable icons.. Would that be possible?
I've put a quick JSfiddle together using font-awesome. The CSS is hacked together but demonstrates what's possible. It should give you a starting point to experiment with.
<a href="#" title="" class="image">
<img src="http://www.lyricis.fr/wp-content/uploads/2010/04/kickass-film-still-01.jpg" alt="">
</a>
<div class="cn">
<div class="inner">
<i class="icon-zoom-in large"></i>
<i class="icon-cloud-download large"></i>
<i class="icon-comment large"></i>
</div>
</div>
Note: The JSfiddle above uses font-awesome.css called externally from bootstrapcdn.com
Since there are no tabs in jQuery Mobile yet, I'm trying to use the navbar to get a similar effect. Here's my HTML code:
<div data-role="navbar">
<ul>
<li><a data-page="desc" href="#" class="ui-btn-active">Description</a></li>
<li><a data-page="reviews" href="#">Reviews</a></li>
<li><a data-page="qanda" href="#">Q&A</a></li>
<li><a data-page="parts" href="#">Parts&Services</a></li>
</ul>
</div>
<div class="panes">
<div data-page="desc">Howdy desc</div>
<div data-page="reviews">Reviews</div>
<div data-page="qanda">You gots questions?!</div>
<div data-page="parts">Parts n stuff</div>
</div>
The problem is, for the life of me I cannot get any click handler to fire off on the iPad. I've tried attaching $.click() to the navbar li, the a tag.. NOTHING works. It works fine on the desktop and I can detect clicks in order to show/hide pages in the "panes" div. But on the iPad (our target), it does nothing. Totally stumped here. Am I missing something?
Try using the tap event rather than click: http://jquerymobile.com/demos/1.0b2/#/demos/1.0b2/docs/api/events.html
I am a little new to this so apologies if I am a little vaugue but I will do my best.
I am attempting to create an iphone friendly version of a site using JQtouch. I understand that normally this would be done all in one HTML file with pages seperated by DIV's. However, I am wanting to load the content from exisitng pages of a website.
The next part to the problem is that my iphone.html page does not sit in the same directory as my current website, so the normal behaviour of JQtouch doesnt seem to work.
So far I have set up a page as follows:
<div id="home">
<div class="toolbar">
<h1>Title</h1></div>
<ul class="rounded">
<li class="arrow"> HOME</li>
<li class="arrow"> ABOUT US</li>
<li class="arrow"> GNWR</li>
<li class="arrow"> GNER</li>
<li class="arrow"> NEWS</li>
<li class="arrow"> FAQS</li>
<li class="arrow"> CONTACT</li>
</ul>
</div>
<div id="content"></div>
<div id="about"></div>
<div id="journal"></div>
<div id="faqs"></div>
<div id="contact"></div>
</body>
</html>
I then have :
<script>
$(document).ready(function(){
$('#content').load('http://www.mysite.co.uk' + ' #content');
$('#about').load('http://www.mysite.co.uk/about' + ' #content');
}
</script>
This loads the content I am after and the page animations work fine. The only problem is that a couple of links exist in the content I am loading and when clicked they obviously dont work.
Is there a way I can check the href of a link when clicked and if it points to www.mysite.co.uk/about change it to point to #about and force it to navigate there?
Hope this makes sense if you need more info let me know.
Regards
Chris.
You are asking quite a few questions inside a single question... You should really break them up into several questions. It's easier for people to answer. Anyways, I'll give it a shot.
First of all, you don't have to have all contents in one html; you can load contents via AJAX. See the AJAX > "GET Example" in this demo, as well as the page content loaded via AJAX.
As far as I know, the pages you want to load do not have to be in the same directory structure. The pages you want to load via AJAX need to contain a valid jQTouch page, i.e. the whole page is enclosed in a <div>.
Is there a way I can check the href of
a link when clicked and if it points
to www.mysite.co.uk/about change it to
point to #about and force it to
navigate there?
If I understand you correctly, you essentially want to replace all the links to www.mysite.co.uk/about with #about. This has to be done with jQuery:
$('a[href="http://www.mysite.co.uk/about"]').attr('href', '#about');
You may want to do that when each page loads:
$(document).ready(function(e){
$('body>div').bind('pageAnimationEnd', function(event, info){
$('a[href="http://www.mysite.co.uk/about"]').attr('href', '#about');
})
});