How can I create outound links in Smooth Animated Menu with jQuery? - jquery-selectors

I am using a very cool jquery drop down menu by Zach at One Mighty Roar. I cannot get this to link to let's say, a Facebook page in a new window. The js file is below:
$(document).ready(function(){
//Remove outline from links
$("a").click(function(){
$(this).blur();
});
//When mouse rolls over
$("li").mouseover(function(){
$(this).stop().animate({height:'150px'},{queue:false, duration:600, easing: 'easeOutBounce'})
});
//When mouse is removed
$("li").mouseout(function(){
$(this).stop().animate({height:'50px'},{queue:false, duration:600, easing: 'easeOutBounce'})
});
});
The html is below:
<div id="nav">
<ul class="tabNav">
<li><img src="../images/facebook.png" alt="Check out our Facebook page!" width="36" height="36" border="0" /></li>
<li>FTP Site</li>
<li>Contact</li>
<li>Services</li>
<li class="current">Projects</li>
</ul>
<div class="tabContainer">
<div class="tab"><p>Click here to be taken to our Facebook page.</p></div>
<div class="tab"><p>Click here to be taken to our ftp site to download your documents.</p></div>
<div class="tab">Contact Info</div>
<div class="tab">Services Info</div>
<div class="tab current">Projects Info</div>
</div>
The css:
/* MENU */
ul.tabNav {
list-style: none;
width: 100%;
float: left;
}
ul.tabNav li {
float: right;
margin: 0;
}
.tab.current ul li {
list-style-type: none;
margin-left: 15px;
line-height: 1.5em;
}
.tabNav li a img {
margin-top: 15px;
}
ul.tabNav li.current {
}
ul.tabNav a {
color: #FFF;
display: block;
height: 66px;
padding: 10px;
text-decoration: none;
width: 66px;
margin-left: 4px;
font-size: 16px;
border: 1px solid #FF9933;
text-align: center;
font-weight: normal;
text-transform: lowercase;
font-family: "Century Gothic";
letter-spacing: 1px;
line-height: 60px;
}
ul.tabNav li.current a {
padding: 10px;
}
div.tabContainer {
clear: both;
float: right;
width: 500px;
z-index: 9999;
}
div.tabContainer div.tab {
border: 1px solid #FF9933;
color: #FFF;
display: none;
padding: 10px;
background-image: url(images/slideshow_bg.png);
background-repeat: repeat;
margin-top: 14px;
height: 500px;
}
div.tab p:last-child { margin-bottom: 0; }
.tabContainer .tab { display: none; }
I have tried adding my http:// up in the tabNav AND/OR the tabContainer sections and I cannot link out. Frustrating.

Have you tried:
Click here to be taken to our Facebook page.
You can also set other attributes. Check out the documentation and examples here: http://www.w3schools.com/jsref/met_win_open.asp

Related

flipping card bug on IOS

i just hosted a small portfolio via github pages, and I tried to use media query to make it work on various device size.
The portfolio section includes these flipping card which i've been told are bogus on IOs devices when using chrome.
In fact it seems the back face are diplayed mirror on the Y axis.
I tried to debug by using CrossBrowser but without success.
Here's the repo with the code,
Here's a link to the bogus section.
Here some code should be enough to reproduce the issue (but i would still suggest to consider the repo code since i could miss something here)
html
<figure class="fig-container">
<div class="card">
<div img class="front face" style="background-image: url('http://img.youtube.com/vi/x10dBwZFi2Q/0.jpg');"></div>
<div class="back face">
<p><b>Location:</b> loc</p>
<p><b class="text-medium-big">Description: </b> desc</p>
</div>
</div>
</figure>
css
figure{
margin-bottom: 0px;
}
.fig-container {
max-width: 450px;
min-height: 160px;
/* horizontal center*/
margin-left: auto;
margin-right: auto;
}
.card {
box-sizing: border-box;
min-height: 250px;
transform-style: preserve-3d;
transition: all 0.5s linear;
border: 2px solid white;
border-radius: 20px;
}
.fig-container:hover .card {
transform: rotateY(180deg);
}
.face {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
border-radius: 17px;
}
.face.front {
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.face.back {
display: block;
transform: rotateY(180deg);
box-sizing: border-box;
color: white;
font-size: 0.5em;
text-align: justify;
line-height: 1.5;
overflow-y: auto;
}
Anyone is able to see the bug and understand what it could be the problem?

Ionic ion-checkbox can we change icon with another icon?

Can we change icon from Ionic ion-checkbox ?
Can we use http://ionicons.com/ ?
for now, here my code :
<ion-view>
<ion-content class="has-header">
<ion-list>
<ion-checkbox class="item-checkbox-right">item 1</ion-checkbox>
<ion-checkbox class="item-checkbox-right">item 2</ion-checkbox>
<ion-checkbox class="item-checkbox-right">item 3</ion-checkbox>
Thank you
No, You can't.
As you can see that it is a default icon Set for ion-checkbox. You can only change the css like styling it by change color, background, margin, padding etc.
Alternatively you can change you checkbox to <input type="checkbox> and style it as in ionic.
UPADTED
I have opted pure css solution.
css
input[type="checkbox"] {
display: none;
}
input[type=checkbox]:not(old) + label {
display: inline-block;
padding: 1px;
line-height: 30px;
background:url(https://cdn0.iconfinder.com/data/icons/woocons1/Checkbox%20Empty.png) left top no-repeat;
background-size: 25px 25px;
}
input[type=checkbox]:checked + label { background:url(https://cdn0.iconfinder.com/data/icons/woocons1/Checkbox%20Full.png) left top no-repeat;
background-size: 25px 25px;
}
html
<input type="checkbox" id="1">
<label for="1">Sector 1</label>
Big Thank You #Atula, we cannot change icon from ion-checkbox,
So, with css Ionic icon, here you are my solution (if you have better ? you're welcome) :
Please, help
html
<ion-view>
<ion-content class="has-header">
<div id="frameCheckboxHome" data-ng-click="homeCtrl.toggle('Item1')">
<label>Item1</label><!-- white space
--><div id="checkboxHome"><i class="icon ion-heart {{homeCtrl.homeTab['Item1']}}"></i></div>
</div>
<div id="frameCheckboxHome" data-ng-click="homeCtrl.toggle('Item2')">
<label>Item2</label><!-- white space
--><div id="checkboxHome"><i class="icon ion-heart {{homeCtrl.homeTab['Item2']}}"></i></div>
</div>
</ion-content>
</ion-view>
scss
#frameCheckboxHome{
width: 100%;
border-bottom: lightgrey solid 1px;
padding-top: 10px;
padding-bottom: 10px;
label{
width: 80%;
margin: 0px;
vertical-align: middle;
padding-left: 10px;
}
div{
width: 20%;
margin: 0px;
vertical-align: middle;
display: inline-block;
text-align: center;
}
div i{
color: lightgrey;
font-size: 36px;
}
.selected { color: orange; }
}
js with angular meteor 1.3 Ionic
class Home {
constructor($scope, $reactive) {
'ngInject';
$reactive(this).attach($scope);
this.myTab = [];
}
toggle(param){
!this.myTab[param] ? this.myTab[param] = "selected" : this.myTab[param] = "";
}
}
...
.component(name, {
templateUrl: `imports/ui/components/${name}/${template}.html`,
controllerAs: 'homeCtrl',
controller: Home
})
...
Well, you can change the icon for ion-checkbox with a little tweak ;).
Approach
remove the default icon
add a HTML element whose class changes on the ng-model value of ion-checkbox
Code
HTML:
<ion-checkbox class="custom-checkbox" ng-model="itemChecked">
I'm a checkbox
<i class="icon"
ng-class="{'true':'ion-ios-circle-filled', 'false':'ion-ios-circle-outline'}[!!itemChecked]">
</i>
</ion-checkbox>
CSS:
// positioning custom icon properly
.custom-checkbox .icon {
font-size: 20px;
position: absolute;
left: 16px;
}
// hiding default icon
.custom-checkbox i.checkbox-icon {
display: none;
}
Here's the CodePen Demo for it.
My solution:
.checkbox-md {
.checkbox-icon:before {
display: inline-block;
content: "\f219";
font-family: "Ionicons";
font-size: 1.9em;
color: $primary;
}
.checkbox-icon {
background-color: transparent;
border: none;
height: 32px;
&.checkbox-checked:before {
display: inline-block;
content: "\f147";
font-family: "Ionicons";
font-size: 1.9em;
color: $primary;
}
.checkbox-inner {
border: none;
}
}
}

I am trying to make CSS work on mobile browsers

My CSS is working perfectly fine on Google Chrome, Mozilla, and Opera. I have also tried Internet Explorer but that was a bust - Not that it matters.
My biggest issue right now is getting my CSS to work correctly on mobile safari (and other smartphone browsers like android).
HTML:
.load-more {
background-color: #00aa00;
color: #ffffff;
display: block;
font-family: 'Numans', sans-serif;
font-weight: lighter;
height: 3em;
line-height: 3em;
overflow: hidden;
padding: 0 3em;
text-align: center;
text-decoration: none;
transition: all .2s ease, background-color .01s ease, color .01s ease;
border-bottom: none;
}
.load-more.load-more--loading {
animation: rotate 1.5s linear infinite;
animation-delay: .2s;
background-color: transparent;
border: .3em solid #e1e1e1;
border-radius: 1.5em;
border-top-color: #00aa00;
box-sizing: border-box;
height: 3em;
color: transparent;
padding: 0;
pointer-events: none;
width: 3em;
-webkit-animation: rotation 2s infinite linear;
}
#-webkit-keyframes rotation {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(359deg);
}
}
<form action="stats.php" method="GET">
<div class="group">
<input type="text" name="player" autocomplete="off"><span class="highlight"></span><span class="bar"></span>
<label>USERNAME</label>
</div>
<center>
<input type="submit" value="CHECK STATS" class="load-more">
</a>
</center>
</form>
The CSS (and a javascript file that I'm using) turn the button into a loader when you click on it, but on mobile browsers like safari the button just disappears when you click it with no loader.
Example: https://epicmc.us
There's some support in iOS 7 and 8 for transform but none for animation in iOS. You're going to have to use jQuery or something to get the effect to work in mobile safari. Caniuse.com tells us the support here for these attributes: http://caniuse.com/#search=transform
This CSS works perfectly on mobile safari...
.load-more {
background-color: #00aa00;
color: #ffffff;
display: block;
font-family: 'Numans', sans-serif;
font-weight: lighter;
height: 3em;
line-height: 3em;
overflow: hidden;
padding: 0 3em;
text-align: center;
text-decoration: none;
border-bottom: none;
}
.load-more.load-more--loading {
background-color: transparent;
border: .3em solid #e1e1e1;
border-radius: 1.5em;
border-top-color: #00aa00;
box-sizing: border-box;
height: 3em;
color: transparent;
padding: 0;
pointer-events: none;
width: 3em;
-webkit-animation: rotation 2s infinite linear;
}
#-webkit-keyframes rotation {
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(359deg);}
}

CSS horizontal menu breaking when zooming Chrome / Safari

I read many similar topics and I tried the suggestions but it seems I can't get this to work.
I am a self-learner, not a professional just building a website for my parents company and I am having a problem with my menu.
This is working fine in IE and Firefox (at least the versions I have) but Chrome and Safari don't like it. Initially in Chrome it looks good but if you zoom out it's breaking and in Safari for iPhone and iPad it's even worse as the last item on my list is never inline with the rest.
What I read is that I need to to have white-space:nowrap; in my code and I do but it's not helping, I was playing with the position attribute as well but none of the values work. Maybe one strange thing about my menu is that each li has an id tag but that's because I want a different image to hover over each item and that's the way I could thing of doing it. I would really appreciate some help, Thanks
Link to the website and code below:http://redcoral-catering.com/index_catering_redcoral.php
Safari iPhone:
HTML:
<div id="navbar">
<ul>
<li id="zero"> за нас</li>
<li id="one"> услуги</li>
<li id="two">нашата кухня</li>
<li id="three" >галерия</li>
<li id="four">филми</li>
<li id="five">кой се е хранил при нас? </li>
<li id="six">контакти </li>
CSS:
#navbar {
width: 894px;
height: 57px;
margin: 0px auto;
padding-left:25px;
padding-top:1px;
/*clear:both;*/
white-space:nowrap;
}
#navbar ul {
font-family: Arial, Verdana;
font-size: 14px;
list-style: none;
margin: 0;
padding: 0;
width:100%;
}
#navbar ul li {
/* display: block; */
display: inline-block;
position: relative;
float: left;
/* border-right: 1px solid #1A1A18;*/
}
#navbar ul li ul { display: none; }
#zero{
background-image: url(images/menu/short.png);
}
#one{
background-image: url(images/menu/short.png);
}
#two{
background-image: url(images/menu/short.png);
}
#three{
background-image: url(images/menu/short.png);
}
#four{
background-image: url(images/menu/short.png);
}
#five{
background-image: url(images/menu/short.png);
}
#six{
background-image: url(images/menu/short.png);
}
#seven{
background-image: url(images/menu/short.png);
}
#navbar ul li a {
display: block;
height: 42px;
text-decoration: none;
text-align: center;
text-transform: uppercase;
font-family: Calibri, sans-serif;
font-size: 13px;
font-weight: bold;
color: #851212;
border: none;
padding: 10px 28px 5px 28px;
}
#zero a:hover { background-image: url(images/menu/22.png); }
#one a:hover { background-image: url(images/menu/22.png);}
#two a:hover { background-image: url(images/menu/24.png);}
#three a:hover { background-image: url(images/menu/22.png);}
#four a:hover { background-image: url(images/menu/22.png);}
#five a:hover { background-image: url(images/menu/23.png);}
#six a:hover { background-image: url(images/menu/26.png);}
#navbar ul li a:hover {
color: #DF0101;}
Try applying the following settings:
html, body {
margin:0;
padding:0;
}
#navbar {
width: 857px; /* updated width to center properly */
height: 57px;
margin: 0px auto;
/*padding-left:25px;*/
padding-top:1px;
white-space:nowrap;
}
#navbar ul li a {
display: block;
height: 42px;
text-decoration: none;
text-align: center;
text-transform: uppercase;
font-family: Calibri, sans-serif;
font-size: 13px;
font-weight: bold;
color: #851212;
border: none;
padding: 10px 26px 5px 26px; /* decreased padding very slightly */
}
Also try placing this meta tag in your header:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Let me know if that solves the issue.

iPhone Vs browser : CSS for right align clear icon in text box

I have seen same kind of issues in stack overflow itself. Still asking it because I am facing the following issue.
I have a textbox which has a clear icon on the right side.
And in the textbox there is a smartfill (autofilling data).
Need this to work fine in desktop browser / iphone browser / or in any mobile browser. !
HTML
<div class="outerWrapper">
<div id="mainContainer">
<label>Smartfill box
<span class="ui-icon-delete"></span>
<input type="text" placeholder="" onkeydown="smartfill()" autocomplete="off" />
<div id="smartFill1" class="smartFillBox">
<li><div>first</div>starts here</li>
<li><div>Second</div>Goes here</li>
<li><div>Third</div>Goes here</li>
<li><div>Fourth</div>Goes here</li>
</div>
</label>
</div>
</div>
CSS
/* Main css --------------------*/
.outerWrapper label input[type="text"], .outerWrapper label input[type="url"], .outerWrapper label input[type="email"], .outerWrapper label input[type="password"], .outerWrapper label input[type="tel"] {
margin-top: 0.3em;
padding: 0;
}
input[type="text"], input[type="url"], input[type="email"], input[type="password"], input[type="tel"] {
-moz-appearance: none;
border: 1px solid #CECECE;
border-radius: 4px 4px 4px 4px;
box-shadow: 0 4px 8px #E1E1E1 inset;
display: block;
font-size: 20px;
margin: 0;
min-height: 40px;
width: 98%;
}
.outerWrapper label {
display: block;
font-size: 16px;
padding-bottom: 7px;
}
#mainContainer {
font-size: 14px;
margin-bottom: 30px;
margin-left: 15px;
margin-right: 15px;
}
/* site css --------------------*/
.ui-icon-delete {
background-attachment: scroll;
background-image: url("http://www.autoweek.com/assets/losangeles/closeButton.png");
background-origin: padding-box;
background-position: 0 50%;
background-repeat: no-repeat;
cursor: pointer;
display: none;
float: right;
height: 29px;
margin: 0 3px;
padding: 0;
position: relative;
right: 0.3%;
top: 36px;
width: 4%;
display: inline;
}
.smartFillBox {
height: 50px;
margin: -1px 0 0;
width: 98%;
display: block;
}
.smartFillBox li {
border-bottom: 1px solid #CECECE;
border-left: 1px solid #CECECE;
border-right: 1px solid #CECECE;
float: left;
list-style: none outside none;
margin: 0;
padding: 0;
position: relative;
width: 100%;
}
JsFiddle link for my issue is here : http://jsfiddle.net/smilyface/ze3sA/
Here is a related link: http://jsfiddle.net/PJZmv/801/
I have 3 elements. 1)input-text-box 2)clear-icon 3)smartfill-div. I am not able to relate these three accordingly! I tried jsfiddle-related-link(given above) still I am getting the same issue. Not able to align correctly.