Using Jquery Mobile, I am trying to emulate what quora has done with its "Add Question" button. The Add Question button is a simple floating '+' aligned centrally in the bottom.
To emulate the same for my app I have created a transparent footer with ui-grid-b and placed the plus icon in the block-b
<div data-theme="a" data-role="footer" data-position="fixed">
<h3>
<div class="ui-grid-b">
<div class="ui-block-a" style="text-align: left;"></div>
<div class="ui-block-b" style="text-align: center;">
</div>
<div class="ui-block-c" style="text-align: right;"></div>
</div><!-- /grid-a -->
</h3>
</div>
With the theme background-color: rgba(0, 0, 0, 0); I do have a plus mark in the bottom, but nothing close to what Quora has been able to do.
My solution does not allow the users to touch and slide anywhere in the footer - while the quora app has no such qualms. The plus button is almost an island of its own. How can I achieve something like this with JQM?
Instead of using a footer, just use an inline button and then add some CSS to center it and fix it to the bottom of the page:
Button markup (added bottomCenter class):
Add
CSS for bottomCenter class:
.bottomCenter {
position: fixed;
z-index: 9999;
bottom: 4px;
left: 50%;
margin: 0;
margin-left: -15px;
}
A high z-index keeps it floating above other content, the rest sets the position to fixed at bottom center.
Here is a DEMO
Related
I want to display four images in 2x2 style with icon on the top right hand side of each picture.
<div class="img-wrapper">
<el-image class="image-single-mr10"
style="height: 250px; width: 250px; display:inline-block; position:relative"
v-for="pic in testUrls"
:key="pic"
:src="getTestURL(pic)"
/>
<span style="position: absolute; top: 0px; z-index: 3;">
OVERLAY
</span>
</div>
I am using el image in relative position. And I tried to use span to simulate the icon. However, I could not get span overlay on images. Moreover, I need to span four times to have each icon on top of the images. How should I do it?
I'm working on building a website, and I have an issue where the navbar is hiding the first bit of the page so I can't see the information. How would I fix this? The link to my website is here:
codepen.io/sookyungahn/pen/wzQkBp?editors=1100
In your case, add padding-top in home div id with same size height on your nav bar.
<div class="container-fluid well" id="home" style="display:block; padding-top:50px;">
Add a padding of the size of your navbar's height to the body.
In the official bootstrap example here, they add a 70px padding on top. Basically,
body {
padding-top: 70px;
}
Since 2017 add position: sticky; top:0; to navbar and it will fix this problem.
<img style="margin-right:10px;margin-top:50px" class="image gap img-rounded pull-left" src="http://odezhda-stilnaya.ru/kartinki/1/ptichka_babochki_zvezdy_2560x1600.jpg" alt="PLACEHOLDER IMAGE" />
<div>
<h3 style="font-family:HelveticaNeue, Tahoma; font-weight:200;margin-top:50px;">I am a website developer, passionate about programming and assisting people. I am currently an intern at a tech startup.
</h3>
Great Code:)
Just add margin-top:50px as shown.
Happy Coding :)
I'm putting together a menu for a bootstrap website, learning this as I go but I'm lost in the world of javascript now.
Just say we have a tabbed nav menu typical to boostrap, when the tab is clicked it becomes active, and it also activates a drop down menu. I can get it to do one of either but not both.
Demo here
http://www.bootply.com/120851
Basically when "pane2" is clicked the dropdown should appear in pane2 content area.
I have included the link to toggle the dropdown separate from the menu just so you can see it works when "pane2" is selected/active. I hope I make sense here.
Thanks!
You can use the following code int pane2
<div id="pane2" class="tab-pane">
<div id="collapseTwo" class="tab-pane">
<div class="the-window">
<div class="dropDownTab">
<div class="taglist">do stuff</div>
<div class="taglist">do stuff</div>
<div class="taglist">do stuff</div>
</div>
</div>
</div>
</div>
and following css:
.dropDownTab {
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
margin-left: 48px;
width: 72px;
text-align: center;
}
http://www.bootply.com/121226
Gone down a different road for the same effect with onclick link.
I am building a phonegap app that needs to scale to all resolutions, and am thus defining everything in terms of percentages. I'm also using a fixed header with a div I defined in Jquery as the contents.
The problem I have is that during the transition between pages, there is a 'stutter' because the page height changes during the transition. I'm trying to stop this from happening. Any thoughts?
I've created a sample below to really illustrate the point.
http://jsfiddle.net/fz7qs/2/
<div id="pageContainer" style="position: relative !important; height: 100%;">
<div data-role="page" id="test1">
<div data-role="header">
<h1>Page Title</h1>
</div><!-- /header -->
<a id="page2link">To Page 2</a>
<div data-role="content">
<p>Page content goes here.</p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
<div data-role="page" id="test2" style="height: 568px">
<div data-role="header">
<h1>Page 2</h1>
</div>
<a id="page1link">To Page 1</a>
<div data-role="content" style="height: 50%;">
<p style="height: 80%; border: 1px solid black;">This is page 2</p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div>
The entire jsFiddle page jumps on the very first visit in Chrome desktop browser, so press the jsFiddle RUN Button to load correctly before use.
EDIT: Answer and jsFiddle revised per comment section developments.
EDIT 2: jsFiddles now use jQuery 1.7.2 with jQuery Mobile 1.2.0 to fix Chrome Browser Bug.
jsFiddle DEMO
The solution is to set your styles in a CSS file and not the HTML section since the jQuery Mobile UI has it's own style themes via a style sheet too.
Also, you have an extra closing div for page at the bottom in that HTML as well as not closing the webpage. The head section in your HTML is not necessary for jsFiddles, as the page is setup for HTML5 and you just need to import files (mobile jQuery) into jsFiddle using the Manage Resources button.
Although you listed in your Question as complete percentage units, I've keep the pixels units as shown in your example, but those can be percentages as well.
CSS Settings:
a {
cursor: hand;
cursor: pointer;
}
.content1 {
height: 268px;
}
.text1 {
height: 50%;
border: 1px solid black;
}
.content2 {
height: 568px;
}
.text2 {
height: 80%;
border: 1px solid black;
}
In your HTML section, I've also pinned the footer to the bottom of the page using data-position:
<div data-role="footer" data-position="fixed">
Besides pinning the footer to the bottom of the page, you can also have it not animate by adding an extra setting of data-id for each page that has the same value.
<div data-role="footer" data-id="foo" data-position="fixed">
jsFiddle FOOTER.
EDIT 2: Per recent discovery of jQuery 1.8.2 and jQuery Mobile 1.2.0 bug seen in Chrome (hidden scrollbar still causes body elements to jump), here is a revised jsFiddle example:
jsFiddle Percentage Based with jQuery 1.7.2 and jQuery Mobile 1.2.0
About this bug:
I just discovered that using jsFiddle with jQuery 1.8.2 and jQuery Mobile 1.2.0 does not work as intended when overflow is set to hidden during use of a scrollBars function within that jsFiddle.
That function is to hide the browsers scrollbars during jQuery animations, preventing elements to briefly jump around during the animation period of page changes.
The browsers scrollbars are in fact hidden, but elements in the body section continue to "jump" as if the scrollbars are still present.
This does not happen when jsFiddle jQuery is set to 1.7.2.
If your curious how to have multiple psuedo pages on a single page, check out this jsFiddle for an unrelated SO Answer here.
Try to change this:
<div data-role="content" style="height: 50%;">
to that:
<div data-role="content" style="height: auto;">
example: http://jsfiddle.net/fz7qs/13/
takes deep breath
Ok, I have a large div that acts as a background layer. This div pans from left to right based on the link you select in a typical horizontal navigation. It's a bit of a novelty thing.
The HTML structure:
<div id="scroll">
<div class="container_16">
<div id="header" class="grid_9 suffix_3 alpha omega">
<!-- the links that control animation -->
<ul>
<li>Example 1</li>
<li>Example 2</li>
</ul>
</div> <!-- end #header --> <div class="main grid_8 alpha omega">
<div class="content grid_12 alpha">
<div id="the_content">
<!-- content is loaded in here via ajax -->
</div><!-- end the_content -->
</div><!-- end .content -->
<div class="clear"></div>
<div id="footer">
Footer stuff
</div>
</div> <!-- end .main .grid_8 .alpha .omega -->
</div> <!-- end .container_16 -->
</div> <!-- end scroll -->
A brief snippet of CSS:
#background_container {
position: absolute;
left: 0px;
top: 0px;
z-index: -1000;
width: 100%;
height: 100%;
}
#scroll {
width: 100%;
height: 100%;
overflow: auto;
}
The Javascript simply uses jQuery to animate the "left" attribute. I would include it, but there's a lot going on and I don't think it will help bring a solution.
Basically, when the background div scrolls from the first position to the last position, the content seems to "scrunch" briefly in Safari.
Video of this behavior:
[redacted]
In the video, I demo both safari and firefox. As you can see, in Safari the content scrunches/glitches during the animation. In Firefox, it does not. Safari is seemingly the only browser that does this. It even works in IE6. :)
The div that appears to "scrunch" seems to be <div id="header" class="grid_9 suffix_3 alpha omega"> but, sometimes you can see a scroll bar briefly which suggests <div id="scroll"> may be the root cause.
Is this a Safari rendering issue that's common and can be avoided? Or should I just suck it up?
Thanks in advance!
You have to set -webkit-transform: transform on the original element so that it gets hardware accelerated on load.