I have embedded an iframe blog space to my shopify blog. Problem is that when the page loads up now the footer overlaps how the actual page should look rather than just tagging on to the end of the container or <div>.
Can anyone help? I'm pretty new and novice to this and have followed many threads trying to rectify but the result stays the same.
This is the embedded code that is in the content:
<iframe src="https://bedfordguitars.exposure.co/?embed=true" style="width: 100%; height: 550px; margin-bottom: 0px; border: solid 1px #ccc; border-radius: 2px;">
</iframe><br />
<!-- <div class="grid"> <div class="unit legal-content"> <div> --> {{ page.content }} <!-- </div> </div> </div> -->
Related
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
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'm trying to do a responsive image gallery with masonry jquery plugin.
I read many article, including in this forum, but it doesn't work. Many blank spaces appears in the gallery.
I'm trying with Jquery Masonry and a simple css and html
.flow { width: 95%; height: auto; min-height: 500px; margin: 0 auto}
.item {
margin-bottom: 10px;
}
`
<div class="item">
<img src="http://www.smartynet.com.br/flampic/img/1small.jpg" />
</div>
<div class="item">
<img src="http://www.smartynet.com.br/flampic/img/2small.jpg" />
</div>
</div>
I created this JSFiddle.
I'm trying to build a gallery like flickr. There is any other best way?
Please someone could help me?
can you just try the Flex Slider for responsive image gallery
http://flexslider.woothemes.com/ or try
http://lokeshdhakar.com/projects/lightbox2/
or
http://fancybox.net/
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/
I am using a jQuery slider panel that pushes the content down rather than overlap it (intended), which works fine on Chrome but not Firefox. On Firefox, it pushes the content down, but when I close it, the pushed down contents stay put, thus leaving a gap where the panel used to be.
How exactly do I go about fixing this? Here's the code I used for the panel:
<div id="about">
<div id="panel">
<!-- the content -->
</div> <!-- end #panel -->
<p id="top" class="slide">+ about</p>
</div> <!-- end #about -->
This is the Javascript:
$(".btn-slide").click(function(){
$("#panel").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
Thank you for your help. :)
Modify the panel style to include float:left and width:100%
#panel{
background-color: black;
display: none;
float: left;
height: 250px;
padding: 50px 0 20px;
width: 100%;
}
This should fix your problem.