I have an Orbit slider in a Foundation 3 site, and I need to be able to show slide numbers, as in "slide 3 of 8".
I see no options for that in the docs, but looking at the _settings.scss file I see these items:
$orbitSlideNumBgColor: rgba(0,0,0,0.7);
$orbitSlideNumFontColor: #fff;
$orbitSlideNumPadding: 5px;
But there's no indication how to use them. Uncommenting them doesn't do anything. How to integrate with a given slider, or do I need to do my oen coding to create numbers?
Take a look at the jquery.foundation.orbit.js file ... Here all options are listed. You want to:
$("#slider").orbit({ slideNumber: true });
Agreed that should have been documented :)
Related
I am trying to understand how things connect in the Admin Dashboard example, the register page here: http://examples.sencha.com/extjs/6.5.0/examples/admin-dashboard/?classic#register
FYI, I have read the entire docs on the quick start and the guide (which includes almost everything), and yet I find few things that I cannot connect. Maybe the docs need improvement or maybe I'm just dumb. I'll find out if its the latter.
This is the entire source code for the application: https://github.com/bjornharrtell/extjs/tree/master/templates/admin-dashboard. I am working with the classic version.
Now for the register page, the main view is this: https://github.com/bjornharrtell/extjs/blob/master/templates/admin-dashboard/classic/src/view/authentication/Register.js
My questions are:
At line 25: cls: 'auth-dialog-register'. Which means an extra css class is being added to the component. Now I searched the scss files and did not find the style definitions for this class anywhere. Since this component is the 'authdialog', I looked at this file in particular: https://github.com/bjornharrtell/extjs/blob/master/templates/admin-dashboard/classic/sass/src/view/authentication/Dialog.scss, but I cannot find 'auth-dialog-register' anywhere. Where is that class defined? Or is it not being used(in that case, bummer)
Similarly at lines: Line 42, Line 57 also, there is a class 'auth-textbox' being attached to text boxes, but I cannot find where its styles are defined.
Moving on, on line 49, for the textfield, a 'triggers' config is defined. In the docs it is here: http://docs.sencha.com/extjs/6.5.1/classic/Ext.form.field.Text.html#cfg-triggers , It really doesn't explain anything, just a bunch of code. Also on the next line in the Register.js file, on line 50, it has a 'glyphed' config inside triggers. Again, I cannot find out in the docs what it is used for. Sure the idea is clear, that it is used for a textbox trigger, but I need to be sure I know what is happening.
My next question is probably connected with the previous one. If you look at the example page: http://examples.sencha.com/extjs/6.5.0/examples/admin-dashboard/?classic#register, you see that all text boxes have an icon saying what the field is for: Email field has an email icon. How did that come? I'm pretty sure it had to do with the triggers config in my previous question. According to the documentation https://docs.sencha.com/extjs/6.0.2/guides/core_concepts/font_ext.html, I should use a 'iconCls' config, but here that is not used.
Please someone explain this. Is it reasonable to have these questions? Or should I have been able to figure them out? I am new to ExtJS and have just started learning it from 2 weeks.
1/2) Seems they are unused classes. I'll open a ticket to remove them.
3) The triggers are button like things that can be appended to the field. As it says in the docs, they are a set of configurations for Ext.form.trigger.Trigger, the options for those can be found here: http://docs.sencha.com/extjs/6.5.1/classic/Ext.form.trigger.Trigger.html
glyphed is not a config, but rather a "label" for that trigger in the field.
4) That is some custom css, applied by the classes used in the trigger.
.password-trigger,
.auth-email-trigger,
.auth-password-trigger,
.auth-envelope-trigger {
&:before{
top: 10px;
left: -18px;
position: relative;
color: $dialog-trigger-color;
font-size: 30px;
}
&.password-trigger:before,
&.auth-password-trigger:before {
content: "\f023";
}
&.auth-email-trigger:before {
content: "\f007";
}
&.auth-envelope-trigger:before {
content: "\f0e0";
}
}
I have a Drupal site where the site on mobile isn't shrinking. It was working fine a few days ago and when I logged in today to do more work, it isn't anymore. I can't seem to figure out why.
I've tried several options for the viewport and none have made a difference. It may be that I've just looked at this code for too long and I'm just missing something.
It's just the front page: http://inv3nt.tgci.com/home
The inner pages are still under construction as far as the theme and such goes, so they're all messed up right now.
Eventually the site will get its own mobile theme, but for now I need this one to scale appropriately on mobile devices. Wish I could figure out what changed in the last few days to make it not work when it was previously.
Thanks for any help you can give. :)
It looks like you have no responsive theming, you have also set a min-width on the page wrapper meaning the page can not go smaller than 1200px
#wrapper {
min-width: 1200px;
}
#main-content {
width: 1200px;
}
You will need to add some media queries http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
eg.
#media screen and (max-width: 1200px) {
#wrapper {
min-width: 100%;
}
#main-content {
width: 100%;
}
}
You will also need to fix other issues such as the header and where you have 2 or four column elements.
You should look at creating a mobile first theme for your site to avoid having to create multiple themes.
You should also look at implementing a mobile menu, I recommend https://www.drupal.org/project/responsive_menu although there is a small cost for commercial use of one of the scripts
I have researched this issue thoroughly throughout Stackoverflow and have yet to find a precise answer, so here is my question.
I am using Sencha Touch 2.4. I am using its default theme, that is, the theme that you see when you first download Sencha Touch and get set up to develop in it for the first time. I am that new to Sencha.
In Sencha I am making a Tab Panel, and in the Tab Panel, I am trying to include in the tab bar one of the many nice little picto icons included in the development kit that is not included in the default theme, using the lines of code:
title: 'Transfer',
iconCls: 'photo2',
html: 'Text stuff'
In addition, all of the guidance I have read tells me to go into the appropriate .scss file for this theme and add a single line of code, like so:
#include pictos-iconmask(‘photo2’);
Obviously it seems that this line of code should be placed in Panel.scss in the tab directory in the default theme folder, but this does not work. Now I have no idea which .scss file it should be. I have since gone into every .scss file in my SDK labeled something related to my theme, such as "tab", "Panel", "all", "app", etc., and added this line of code, but the icon will not show up. I am obviously missing something. Someone please tell me, assuming the default theme, exactly which file and in which directory and on what line of code in that file do I place this piece of code known as
#include pictos-iconmask(‘photo2’);
Thank you for any help you can give.
In Sencha Touch 2.4, just include the icon (as opposed to pictos-iconmask). For example:
#include icon('photo2');
I would recommend doing this in a high level file, not a scoped file such as tab.Panel.scss. You can always narrow down your SCSS scope later on, however for debugging just toss the include into your base app.scss to ensure it works first.
You can use the following css code to accomplish your task:
.x-tab .x-button-icon.photo2:before, .x-button .x-button-icon.photo2:before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
text-align: center;
font-family: "Pictos";
content: "N"; //mention your pictos character here like i have mentioned N here
}
I am about to create my first 'mobile-first' website and am unsure on the best way to conditionally load content as the viewport increases.
For example, lets say I wish to load a twitter feed only for desktop browsers, not mobile, how would I do this?
Option 1) Display: none - This is bad as content still loads for mobile
Option 2) Have content in markup, but remove.element with javascript - I believe this content still loads first, then is removed after? If so, not good.
Option 3) Using javascript, if viewport is wide enough, load content - This seems to be the recommended approach, from what i've read, but Is it a good idea to have markup in javascript? I am thinking about accessibility, semantics and seo.
Are there any other better solutions?
Any advice would be greatly appreciated.
You might want to check out Modernizr . It's easy to install and you can use it check for HTML5 support in a visitors browser, as well as the window width, for example:
if (Modernizr.mq('(min-width: 400px)')) {
/* do this for tablets and desktops */
}else{
/* do this for handhelds */
}
Good luck!
UPDATE
thanks, but then in that case would it not be better to do that straight with javascript - if (document.documentElement.clientWidth > 640)
You are right, for that specific instance of deciding whether or not to load a twitter feed, there probably isn't a big advantage of using my suggestion over your option 3. Thinking ahead though, with repsonsive design, mobile sites and now HTML5, the next questions you are going to come up against are how to customise the CSS for different viewpoints, or how to test if a visitor's browser supports a certain HTML5 feature.
You could certainly take a roll-your-own approach and write custom javascript for each case, or you could use Modernizr to test if the visitors browswer supports media queries, and if it doesn't load respond.js, or use Modernizr to test if the vistor's browser supports geolocation or html5 forms or certain video formats ..., and if it doesn't conditionally load a cross browser polyfill.
There are usually multiple ways of achieving the same goal, I'm strong on not reinventing the wheel ;)
Who says? Display:none; is one the best practices in showing and hiding elements for any specific viewport.
And one thing Adam, mark-up is the least downloadable stuff for each device, they have to process some other things if you hide element by Jquery or Javascript. Because sometimes small devices either don't support loading them or take extra time that's why they are visible.
But it has the pitfall for SEO purposes.
For SEO optimization along with hiding elements you can do one of these things with your CSS.
First,
#media screen and (max-width:480px) {
div {
position: absolute;
left: -9999em;
width: 0;
height: 0;
overflow: hidden;
}
}
But it was the less efective because Google Webmaster takes care all such hacks. And You may be blacklisted from being Google indexed.So You should use one of these modern methods to hide elements.
Second,
div {
position: absolute !important;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
padding: 0 !important;
border: 0 !important;
height: 1px !important;
width: 1px !important;
overflow: hidden;
}
or, third,
div {
color:transparent;
text-indent:100%;
overflow:hidden;
white-space:no-wrap;
font:0/0 a;
text-shadow:none;
}
I have a Stylish script on Firefox that moves the Search button on Starting Page, but the problem is that it will move the Search button on other pages, as well.
The lines
#-moz-document url("http://startingpage.com/eng/advanced-search.html?&cat=web&query=")
OR
#-moz-document domain("http://startingpage.com/eng/advanced-search.html?&cat=web&query=")
do not work. The Search button will move on any page that has it.
Any ideas to make it site-specific?
Here’s the script:
#-moz-document url("http://startingpage.com/eng/advanced-search.html?&cat=web&query="){
}
input[value="Search"] /*isolates button*/
{
position: absolute;
top: 311px;
left: 660px;
}
Firefox 3.6.14, Win 2K
General answer:
That first line (#-moz-document url("http://startingpage.com/eng/advanced-search.html?&cat=web&query=")) should work. Does it only fail because other pages are also affected or does it fail because it never fires?
Anyway, things to check:
Was the opening brace omitted? Usually those lines are like:
#-moz-document url("http://www.google.com/hl=en&q=foo&aq=f") {
Note the brace at the end (But editing for the brace on the next line is fine, too.
Are the next pages, after the Starting Page, being loaded in by AJAX? For example, Google does this. You will notice that after entering a search term, the entire page does NOT reload.
If this is the case, then Stylish will still have the overwritten styles in effect; there is no help for it in Stylish.
So, confirm the problem with your first line. It would also be good to include exact links to the target pages and the full script.
If it is an AJAX issue, then you can easily convert the Stylish script to a Greasemonkey script -- which can, with a little logic, apply styles correctly, even on Ajaxified pages. (If that is the case: mark this question answered and open a new question, providing the full Stylish script and the desired results.)
Specific Answer, based on new information from the OP:
Based on the script provided, the error is that the braces are mispositioned. Also, you should provide a namespace.
So replace the script text with:
#namespace url(http://www.w3.org/1999/xhtml);
#-moz-document url("http://startingpage.com/eng/advanced-search.html?&cat=web&query=")
{
input[value="Search"] /*isolates button*/
{
position: absolute;
top: 311px;
left: 660px;
}
}
#-moz-document url-prefix("http://startingpage.com/eng")
or
#-moz-document domain(startingpage.com)