I want to implement a Dashboard-style navigation in a mobile web application using jQuery Mobile: http://mobile-patterns.com/dashboard-navigation
Are there any useful templates or good approaches to do so? Of course, I could build a grid-based content page, containing the icons and links. But thanks to the popularity of dashboard navigations, I'm looking forward for an easier solution.
Thanks in advance
This article talks about making custom icons for use in jquery mobile. I would follow that for creating my icons, and then refer to jqmobile's navbar documentation for instructions on how to build a 3 x 3 column list:
<div data-role="navbar">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</div>
Then further down in that same article is a, Using 3rd party icon sets section that will explain how to add in your icons. Since you won't want the default box behind your icons, you could add another css class to your container div where you can override jquerymobile's "navbar" class and hide the box:
<div data-role="navbar hidebox">
Note: When I'm working with jquery mobile, I import my own custom stylesheet after the jquerymobile css import. This lets me override classes that jquery mobile injects in to my code. This is where I'd override 'hidebox' class.
Also, this may help with building a 3 x 3 squared grid, since this developer was doing something similar (I know, the developer is using Sencha Touch but the discussions around it may help).
Related
can you help me understand what bootstrap is? I know people is it for styling pages but can you clarify it to me? A big company like Twitter, Facebook or YouTube can use it?
Bootstrap is a very nice set of "styles" for all elements of any webpage. With it, a developer can focus on what they want to build (i.e. the elements) and very easily apply all the styling (including a lot of the colours, positioning, layout, movement/javascript) by simply adding few lines of code at the start of the webpage and adding a bootstrap class to an element, or wrapping parts of their webpage in a <div>.
Here is an excellent example of a very basic site that is made to look professional very quickly using very simple bootstrap. Click on "full page demo", then view -> view source to see the source code.
You can see some classic bootstrap classes like
<div class="jumbotron text-center">
and
<div class="container-fluid">
Bootstrap is a free and open-source front-end framework developed with css and javascript.
For styling and other change of the html, we make CSS classes and ids. And the main work we do in the css file and js file . But in bootstrap there is already some files which have many built in classes and ids .
After adding bootstrap to a html file we can do many work by only calling those classes and ids .
like ,
<p class="text-center">Center aligned text on all viewport sizes.</p>
only calling the class "text-center" we can align text center . No need to do any other css .
Many big company like Twitter, Facebook or YouTube can use it. On the other hand some make their custom files like bootstrap.
I do hate to keep asking questions. I have been trying to add code to my website. No matter what code I add, none of it works. I have changed the names of the CSS names thinking that would work but it fails.
Currently I am trying to add in some image gallery blocks. I am on w3 schools and it works.
https://www.w3schools.com/css/tryit.asp?filename=trycss_image_gallery
I bring the CSS and code to my website and it looks like this:
https://postimg.cc/image/ifn4dsqrr/
I have tried so many card and block codes and they all either mess up my homepage or ruin the css and I have to revert back to the previous version.
Over the last 2 days I have spent 6 hours trying to get 4 little responsive blocks with image background and text overlay to simply work in between 2 banners.
Here is a link to my test store where I am building out a homepage:
http://newdev-vitavibe-com.3dcartstores.com/
I am determined to learn why. I opened up a request to pay someone to build this homepage for me. I had lots of offers but I really want to learn how myself.
If you are willing to use bootstrap you could put them in containers, I linked below the documentation for this. Bootstrap will make your life a lot easier when it comes to grids, saved my butt plenty of times.
https://getbootstrap.com/docs/4.0/layout/grid/
Inspecting the html of your site, a saw that what you want could be accomplished with the following html structure
<div id="fullWidthBlock" class="fullWidthBlock2">...</div>
<div class="gall">...</div>
<div class="gall">...</div>
<div class="gall">...</div>
<div id="fullWidthBlock">...</div> <!-- all the div.gall where here -->
Note that the <br/> between the two div#fullWidthBlock where removed.
And dont repeat the id attribute it is meant to be unique in each html document.
Thats the page with the changes:
Take a look at "!important" keyword in CSS. You should use it like that:
#smth { color: red !important; }
I've been looking all over the Internet for a tutorial on using the Scott Kellum's parallax technique, but didn't find any. I've seen his example on CodePen and for the life of me couldn't figure out how to position and size elements on the page properly.
Let's say that I have a few simple sections as follows:
<div id="section1"></div>
<div id="section2"></div>
<div id="section3"></div>
<div id="section4"></div>
Inside each section I have some content (could be any HTML). How would I go about using Kellum's technique to make backgrounds "overlap"? I'm looking for a tutorial on actually using the technique. Thank you!
This is not a very good answer, but if you want a fairly simple way of doing parallax check out skrollr. All you have to do is link the source and initialize it, and after that it is as simple as adding parameters to your elements. Also there is a very good tutorial if you just search skrollr on Google it will be one of the top hits.
I am trying to create a menu using HTML5 ( type toolbar ). It turns out that no browser currently supports the toolbar type. (Thanks Zach for pointing me at this) What would be the best implementation that works for Chrome and Firefox ?
Currently, I am thinking about continuing using the menu element as per HTML5 spec and using CSS to style it as needed and JS to add behaviour.
The following mailing list posting explains the current intent for menus of type toolbar:
Toolbars are nothing more than a with the element name .
There's no magic at all, no special content model, it's all CSS for
styling, you use regular form controls to fill the toolbar.
from http://lists.w3.org/Archives/Public/public-whatwg-archive/2012Dec/0264.html
Hence, I am daring to say, that I can use menu for all browsers, even if a browser does not explicitly support the HTML5 semantic of the menu element, because it will still display it as a block since the user agents, I have checked ( i.e. firefox,chrome,safari,ie) , style menu with display:block.
If you're open to using a bit of jquery, and if i understand your question, then a simple
<div data-role="footer">
<div data-role="navbar">
<ul>
<li>Summary</li>
<li>Favs</li>
<li>Setup</li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
would do the trick.
read more about navbar widgets here: http://demos.jquerymobile.com/1.4.1/navbar/
I would take a look at the bootstrap menu, it works (IMO) much like a toolbar, and it's got a wide support on a lot of browsers.
It's also got glyphicons so you can give your buttons icons beside the labels easily
Is it possible to do this layout and how would you do it?
The container has a border, just not on top where the tabs are. Here only the selected tab has a top border. The text of the tabs should center, left align would be okay too. But the text of the first tab must not start before the image (there should be the same space on the left).
Currently the html looks like this but can be changed if needed:
<section class="grid-100 grid-parent tabs">
<header>
<ul>
<li class="selected">Tab1</li>
<li>Tab2</li>
<li>Tab3</li>
</ul>
</header>
<article class="tab visible">content</article>
<article class="tab">content</article>
<article class="tab">content</article>
</article>
</section>
This layout is possible, but as mentioned you'll need to post your CSS.
Have a look at Twitter Bootstrap which allows you to placed tabbed content within a responsive framework.
You'll need to add a bit of JS to get this running, you can either do this by adding "bootstrap.min.js" or just add the tab script by itself. Here's a direct link to the tab JS documentation http://getbootstrap.com/2.3.2/javascript.html#tabs
Your structure can be used for any tabbed interface or an accordion. Please provide your css for your tabs. You can use bootstrap tabs as mention in this post. There some other tabbed solution like foundation tabs and jQuery ui tabs. If your looking for a premium responsive tabbed solution, have a look zozo tabs, which has a lot of examples.
http://zozoui.com/tabs
cheers
FariDesign