I have a slider made with the jquerycycle2 plugin, but it seems to initiate after the content has loaded causing all the images/content in the slider to show at once on first load. I don't want to put a fixed height with overflow hidden because the site is responsive and the height will vary. Any idea for a fix for this? Ideally I'd like to fade it in on load. You can see it here:
.slideshow div {
display: none;
}
.slideshow div:first-child {
display: block;
}
This hides all but the first slide when the page first loads, and prevents the flash of content showing all slides before the jQuery kicks in.
Related
I've been tinkering with Mobirise. I've laid out a quick site and wish to customize the top nav. In the current state the nav has two sections. Top and bottom. As the user scrolls the top gets hidden and the bottom gets minimized. I've altered the code slightly to keep the top in view as the user scrolls, however, it's not 100% yet and I can't seem to figure out what is causing the bottom ot overlay the top. I tried z-index setting to no avail. Any thoughts would be greatly appreciated.
The site is here. http://arnolfodesign.com/clients/hvac/
btw, the client will want their phone number showing at all times, thus the reason for keeping the top inview.
Find the 1365th line in the mbr additional.css
Add
.cid-qv8RNySB8F .navbar-short .menu-content-top {
height: auto;
border: none;
}
instead of
.cid-qv8RNySB8F .navbar-short .menu-content-top {
height: 0;
border: none;
}
I am building a site using the JA Purity III template where on PCs etc a module displays on the right hand side next to the article. However, on small screens the module is pushed underneath the article. What I'd really like to do is hide the module on the smallest of screens and display a modified copy of the module in a position above the article.
With this template I can turn on and off the display of modules for various sizes of responsive device, but turning them off for Pcs etc also turns them off them off for all devices.
An example: http://www.timhillpsychotherapy.com/test2014/introversion.html on a PC has the green module next the article, on a mobile screen it gets pushed below. Instead, on a small scree only I'd like to have an variant of the green module above.
I'd really appreciate any suggestions.
You have to add 2 modules in your template and show / hide them due to css media queries.
That would be good to add a module suffix to help you select them: Advanced -> Module Class Suffix.
Your css selector has to be like:
#media (max-width: 700px) {
div.module_modsuffix1 { display: none; }
div.module_modsuffix2 { display: block; }
}
#media (min-width: 701px) {
div.module_modsuffix1 { display: block; }
div.module_modsuffix2 { display: none; }
}
Good Luck!
Since the last update pack of Linux Mint Debian, GTK3 buttons suddenly need more width than before, so that they don't fit in an application I wrote. The problem is that they allocate more space around the button label (something like 25 pixels each side), and cannot be convinced not to do so.
The button was created with gtk_button_new_with_label, so nothing fancy.
I tried everything to reduce that wasted space, but nothing worked:
gtk_widget_set_size_request(GTK_WIDGET(mybutton),1,1); does nothing.
gtk_widget_set_margin_right(sidebar.button[i],0); decreases the spacing around the button, not inside.
gtk_container_set_border_width(GTK_CONTAINER(mybutton),0); decreases the spacing around the button, not inside.
what have I missed?
I guess that's defined in the stylesheet of the theme you are using. You can try overriding the style of the widget using GtkCssProvider. A python example could look something like
my_style_provider = Gtk.CssProvider()
my_style_provider.load_from_data(b'GtkWidget { padding-left: 0; padding-right: 0; }')
context = widget.get_style_context()
context.add_provider(my_style_provider, Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION)
Note: untested.
What would be the best way to keep the "fixed" and/or "sticky" functionality on Zurb Foundation 4's top-bar in desktop views, but remove for mobile views? Having a fixed top bar is great to have on larger devices, but wastes valuable screen real estate on mobile devices.
I'm actually surprised that it doesn't do this by default (or at least have an option to disable on mobile devices).
My quick solution is as follows:
$(function() {
if (Modernizr.mq('only screen and (min-width: 768px)')) {
$('#header').addClass('fixed');
}
});
There's a probably a more elegant solution though (and one that takes care of screen resizing etc.).
EDIT: re-read my question after and realize it was very unclear. Have updated.
You could modify the .fixed class like so:
.fixed {
width: 100%;
position: relative;
#media #{$small} {
position: fixed;
top: 0;
left: 0;
}
}
This will show the navbar as fixed for views larger than mobile, and it should then be free to scroll for mobile.
I'm not sure if it is more elegant but I think I would use .hide-for-small .show-for-small as appears in some elements on the foundation templates, I know that it implies repetition, but hey, it's maybe an opportunity for a more mobile friendly layout for the top-bar. Hope it helps.
Maybe my answer is too obvious, but have you tried on the media query for the mobile devices?
.top-bar {
display: none;
}
The Orbit slider that comes as part of Zurb's Foundation seems to add a class of hide-for-small to the navigation.
I need the navigation to still show up however in order to show my content. I have tried removing the hide-for-small part of the wrapper in jquery.foundation.orbit.js line 59 but the class keeps getting added.
Does anyone have an idea how to remove it?
You should add .touch .orbit-bullets { display: block; } to your css. Foundation 4 adds the .touch class when using a touch-enabled device, which hides orbit's bullets and arrows.
Better yet, add the following to your app.css to over-ride the class:
.hide-for-small {
display: block !important;
}
It's more future-proof if you upgrade your Foundation someday.
Update: Please see jmsg1990's answer as it is the proper way to do this now.
Just ran into this problem myself and solved it quite easily by opening up jquery.foundation.orbit.js.
At line 60:
directionalNavHTML: '<div class="slider-nav hide-for-small"><span class="right"></span><span class="left"></span></div>'
Simply remove the class "hide-for-small" like below and it works as expected.
directionalNavHTML: '<div class="slider-nav"><span class="right"></span><span class="left"></span></div>'