I want to know if someone knows how to make a popup advertisemente banner in a mobile site, just like the one you can see in m.imdb.com
It's an ad banner with a close button.
Thanks in advance
Pablo
Solved
This is the script
<script>
$(document).ready(function(){
$("#freebie").click(function(){
$(this).hide();
});
});
</script>
And this is the html code
<div style="position:fixed; bottom: 0px; width: 100%; z-index: 999999;" id="freebie">
<img src="YOUR_IMAGE.jpg" border="0" style="background-color:black; opacity:0.85; height:50px; width:100%; position:absolute; bottom: 0px; z-index:-1;">
<img style="margin-right: 0px;margin-top: -60px;position: absolute;right: 0;top: 0;" src="SOME_CLOSE_BUTTON.png" border="0">
</div>
Cheers!
Related
I have this screen:
I want the screen to look like
so the motorcycle will appear also with the red flag when the status is active
The code:
HTML
<a class="" ng-class="{'myflicker':orderInfo.status==orderStat.order_status}">
<div class="logoMove" aria-hidden="true"></div>
</a>
<div class="map "></div>
<div class="triggerName">
{{orderStat.order_status_display}}
</div>
</li>
<div class="clearfix"></div>
</ul>
</div>
CSS:
.tracker .active a {
background-image: url(../images/flag_red.png);
background-repeat: no-repeat;
border: 0px solid #A52A2A;
The image is inside here:
.li.a.logoMove{
background-image: url(../images/moto.png);
background-repeat: no-repeat;
position: absolute;
width: 150px;
height: 150px;
left: 0;
transition: all 2s;
}
But image is not showing right. Why is that?
When you position something as absolute , you have to give it z-index . Try giving the picture you want to be shown a z-index: 1; . Tell me if this does anything.
I've been stuck at this for a while, this is my generated html:
<div style="margin: 0 5px; border: 2px solid #FFFFFF; height:24px;">
<div id="activity-bar" class="padding0 margin0 ng-isolate-scope" style="width: 100%; background: rgb(179, 179, 179); position: relative; overflow: visible; height: 20px;" ng-style="thisStyle" display-sections="student.history_list" height="20" loading="loading" type="2" user-id="student.fic_student_id">
<div ng-click="console.info('working');" class="activity-section absolute-pos inline-block act-29464 task-background-3 ng-scope" style="left:0%; width:10%;height:20px;" tooltip-placement="top" tooltip-append-to-body="true" uib-tooltip="PrimaryGames: Free Games and Videos
primarygames.com (click on the bar to view)
start time: 09:40am"></div>
<div ng-click="console.info('working');" class="activity-section absolute-pos inline-block act-54094 task-background-4 ng-scope" style="left:10%; width:10%;height:20px;" tooltip-placement="top" tooltip-append-to-body="true" uib-tooltip="writing0.sumdog.com
writing0.sumdog.com (click on the bar to view)
start time: 09:45am"></div>
<div ng-click="console.info('working');" class="activity-section absolute-pos inline-block act-54094 task-background-4 ng-scope" style="left:20%; width:10.01%;height:20px;" tooltip-placement="top" tooltip-append-to-body="true" uib-tooltip="writing0.sumdog.com
writing0.sumdog.com (click on the bar to view)
start time: 09:50am"></div>
<!-- Some more divs -->
</div>
</div>
The tooltips are working but the ng-clicks are not, am i missing something?
In angular, recommended way is to call function
<div ng-click="consoleinfo('working')"
In Controller:
$scope.consoleinfo = function(message){
console.log(message);
}
DEMO
I need to implement a menu with the exact same looks as onsen sliding-menu,but that slides from top. I was thinking to use onsen gestures to be able to drag the menu, but the gestures sample provided in the onsen guide does not work. Am I missing something?
<ons-gesture-detector>
<div id="detect-area" style="width: 300px; height: 300px;background-color:blue;">
Swipe Here
</div>
</ons-gesture-detector>
<script>
alert("in");
$(document).on('swipeleft', '#detect-area', function() {
alert("swipe");
})
</script>
Try this, it should work. Don't forget to add jquery first.
<ons-gesture-detector style="height: 300px; margin: 50px 50px;">
<div id="hoge" style="border: 1px solid #ccc; background-color: #f9f9f9; width: 100%; height: 300px; line-height: 300px; text-align: center; color: #999;">
...
</div>
</ons-gesture-detector>
<script>
var eventName =
'drag dragleft dragright dragup dragdown hold release swipe swipeleft swiperight ' +
'swipeup swipedown tap doubletap touch transform pinch pinchin pinchout rotate';
$(document).on(eventName, '#hoge', function(event) {
if (event.type !== 'release') {
$(this).text(event.type);
}
});
</script>
In my angular.js learning project I want to hide one div and show another when I click a button.
In this code, I'd like the first div to be hidden at the click (or even destroyed?) and the second div to be shown.
Basically I want the user experience of going from page 1 to page 2 in my app.
How do I make this happen?
Index.html
<ion-content ng-controller="StartpageCtrl">
<div class="list card" id="startCard" ng-show="showstartCard">
<div class="item item-image item item-text-wrap">
Card 1
</div>
</div>
<div class="list card" id="secondCard" ng-show="showsecondCard">
<div class="item item-image item item-text-wrap">
Card 2
</div>
</div>
<button ng-click="hideCard()" class="button button-full button-calm button icon-right ion-chevron-right">
Start now
</button>
</ion-content>
controllers.js
.controller("StartpageCtrl", funcion($scope){
$scope.showstartCard = true;
$scope.showsecondCard = false;
$scope.hideCard = function() {
$scope.showstartCard = false;
$scope.showsecondCard = true;
};
});
When I run the page I see "Card 2" and nothing happens when I click the button.
What I wanted to see was "Card 1" and for it to switch to "Card 2" as I click the button...
Solved
I had forgotten to add references to controllers.js in the app.js angular.module as well as the script tag in index.html. It works fine now.
Using angular:
HTML file:
<td>Source Doc..
<div id="mydiv" ng-show="showDetails">
<div id="mydiv-container">
<div id="mydiv-content">
Close
<br>
hello
</div>
</div>
</div>
</td>
css file:
body {
height: 100%;
background-color: #F0F0F0;
font-family: Arial, sans-serif;
}
#mydiv {
width: 100%;
height: 100%;
overflow: hidden;
left: 100px;
top: 150px;
position: absolute;
opacity: 0.95;
}
#mydiv-container {
margin-left: auto;
margin-right: auto;
}
#mydiv-content {
width: 70%;
padding: 20px;
background-color: white;
border: 1px solid #6089F7;
}
a {
color: #5874BF;
text-decoration: none;
}
a:hover {
color: #112763;
}
If you are looking for toggle, then this code might help as there is no need to have any extra CSS or JS functions needed.
<button ng-click="isDetailOpen = !isDetailOpen"
ng-class="!isDetailOpen ? 'ion-ios-arrow-down' : 'ion-ios-arrow-up'"
class="button button-clear button-positive icon-right">
<span ng-show="!isDetailOpen">More Detail</span>
<span ng-show="isDetailOpen">Less Detail</span>
</button>
<div ng-show="isDetailOpen">
<p>Per ad ferri dicta, omnis laudem dicunt duo an. Ex pri solum definitiones.</p>
</div>
I figured it out while working on Angular-Ionic project.
My problem has to do with how mobile browsers seem to be ignoring the border radius attribute when inside a div with overflow:scroll. Below is an example of the problem in a jsfiddle that needs to be opened in a mobile browser. As you scroll you will see that the red boxes poke out of the border-radius corners at the top and bottom of the grey element. If anyone knows of anyway to get rid of this problem, please help! Thanks in advance!
http://jsfiddle.net/Thatguyhampton/LLn74/
html:
<div class="card scrollable">
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
</div>
css :
.scrollable {
box-sizing: border-box;
overflow: auto;
overflow-y: overlay;
position: relative;
-webkit-overflow-scrolling: touch;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.card {
height: 300px;
width: 100px;
background-color: grey;
border-radius: .5em;
}
.content {
height: 50px;
width: 100%;
background-color : red;
margin-top: 10px;
margin-bottom: 10px;
}
Just want to stress that I only see this on mobile browsers.
remove the -webkit-overflow-scrolling: touch; and it will fix it :)