I have two questions. First I am using a spry accordion for this website I'm designing, however its the fist time I've used it so I wanted to know how to turn off the blue box that surrounds it everytime you press on it. Does anyone know? I tried to revise the css but I know its not in there.
My second question is how do I make all the tabs closed when you open the website?
Here is the example of the website, I think it will make it easier to visualize.
Spry Panel Example
Thanks!
Sophie
It actually seems to have nothing to do with spry, what I'd do is add this to your CSS:
.Accordion {
border:none;
outline:none;
}
I figured it out, you actually need to erase the tab index at the beginning of the accordion html code:
<div id="Accordion1" class="Accordion" tabindex="0">
Actually none of the above worked for me, what you have to do is instead of saying border and outline NONE it works best if you apply the background colour. so instead of trying to get rid of it - disguise it. works a treat
Related
I am new to automation, and my previous experiences were with non-Angular apps, thus i start to use Protractor.
I want to navigate throught the website, though cannot find the right selector.
The button is highlighted in red on the bottom of the screen:
I've tried below code among many:
element(by.name('Flota')).click()
or
element(by.css('.ng-tns-c11-5')).click()
element(by.css('div[title=Flota]'));
maybe you should target the <a> or <nb-icon> element instead?
Try the following locators:
using a:
element(by.css('.ng-tns-c11-16.ng-star-inserted.active'));
or nb-icon:
element(by.css('.menu-icon.ng-tns-c11-16.ng-star-inserted'));
Additionally, if you need to target the <span> element:
element(by.css('.ng-tns-c11-16.ng-star-inserted.active span'));
I suggest
by.css("a[title='Flota']") //if this is the button you are looking for
Since the shorter is locator - the better
your help was much appreciated!
Unfortunately, i tried all options you provided and didn't work, though i made additional trial and error runs.
The code i worked out is below, maybe it will help another newbie like me:
element.all(by.css('#menu-item ng-tns-c11-4 ng-star-inserted li')).click()
I made a type of menu box with css click events using targets and link them with hash anchor tags. The problem is, when I click one of the buttons (One, Twii, Thrii, etc.) the page jumps! I tried using a js script to stop the default behavior but to no luck. Could you please help me stop the page jump so the page does not move when a button/link is clicked!
Heres the JS Fiddle link I made. jsfiddle.net/3ASpX/1/
I need a solution..whether its with using target or something else!
Thank You and I apoligize for any confusion in explanation and the question itself if I have done something wrong, your help is much much much appreciated.
I think you could do this by using <div> instead of <a>.
But if you have to use an <a>, you could remove the target with jQuery:
$( '.link' ).removeAttr("href");
I manage/webmaster half a dozen websites that have facebook like boxes on their index pages. These were all working fine until yesterday, when suddenly they all began to display to the right of the page (where previously they had been centered). No changes have been made to any of these pages in the last day or two, so I can't think of any reason why they would all suddenly right-align.
Some of these scripts are between "center" tags, Others are inside centered tables. But they're still displaying to the right of the page. I've tried everything I can think of to get them to display in the middle of the page again, but nothing I've tried works. I'm also curious to know why they would all suddenly lose their center alignment.
Anyone have any ideas?
Any help would be very much appreciated.
You can see an example of what I'm talking about at holisticspain-dot-net
.fb-like-box.fb_iframe_widget *
{
text-align: left !important;
}
This worked as a temporary fix as well.
We already apply some styling to our button (it is surrounded in <li> tags, but we found we had to change the style for this.
We previously had this style applied
.fb-tool {position:relative;left:8px;}
We changed it to this.
.fb-tool {position:relative;left:8px; text-align:left;}
Just a short answer - might help perhaps. I changed the display property of .fb_iframe_widget to relative with !important and it fixed the sudden leftiness.
Following Harold Neal and Sergei S's suggestions, you can add text-align:left; to the default style="background-color:#000000;" portion of the tag.
i have some styling on the more button http://www.mw-app.cp.thedms.co.uk/thedms.aspx?dms=106 ( http://bit.ly/ArzcYi for faster typing) here, on all browsers and phones it looks how i want.
However on the iPhone its still seems to be pulling default styles (which are internalally set up styles) through and looks like this http://i.imgur.com/Piv3E.jpg and for the life of my i cant figure out why it is overwriting. Hope someone can shed some light on it.
Thanks in advance
You will need this is your CSS for the button.
-webkit-appearance: none;
Think vitamin has a great article on this topic. Cheers
http://thinkvitamin.com/design/styling-submit-buttons-for-mobile-safari/
I'm looking for a tutorial without any javascript - pure CSS3.
I've created two pages (page1.html, page2.html) for the iPhone and I'm using CSS3 and the -webkit-properties.
To connect those sites I created a next- and a backbutton.
When tapping on the nextbutton page2.html is loaded, when tapping on the backbutton page1.html is loaded.
This is working so far.
I'd like to try using some more -webkit-properties to get the flip-effect like in this demo.
So, when clicking on my next-button page2.html should be flipped in. When clicking/tapping on the backbutton page1.html should be flipped in.
I'm new to this and hope to get some help here. Do you know a tutorial dealing with my problem?
Another question coming up to my mind was whether it is possible to load page2.html seperatly or whether I have to build only one page with the content of page1.html and page2.html?
You have to build only one page with two sections/divs with the flip-contents in it. Then you can use the transform: rotateY … or, maybe load the second page in with AXAJ or something else, but because it's CSS on my understanding you have to put everything in one page with two sections/divs
There are lots of pageflip demos on the interwebs. This is one we did It was inspired by Roman Cortes one - there are others that use more of a squeeze than a flip.