How to change a link inside the flash element? I have SWF file with set a link inside and I want to change to mine on the website. This thing I need to control the advertisment system.
Trying this, but not working:
<style>
#content {
position: absolute;
z-index:2;
}
#flash {
position: relative;
z-index:1;
}
</style>
<div id="content" onclick="window.open('http://mylink.com','_blank');"><img src="no" width="100" height="100" border="0"></div>
<div id="flash"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://active.macromedia.com/flash4/cabs/swflash.cab#version=4,0,0,0" width="100" height="100">
<param name="movie" value="111.swf">
<param name="play" value="true">
<param name="loop" value="true">
<param name="quality" value="high">
<embed src="111.swf" play="true" loop="true" quality="high" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" width="100" height="100"></embed>
</object></div>
Right now found this exapmle:
<div style="border: #FF9900 3px dotted; width: 400px; height: 200px;">
<object id="swf">
<embed src="/uploads/storys_files/2006.03.15_15.55.30/123.swf" loop="true" quality="high" wmode="transparent" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" height="200" width="400">
</object><img src="http://yapro.ru/uploads/users/1/2010/12/16/782d4b5d3c55bdc50619b8aa141b4ecc.gif" height="170" width="350" style="border: #99FF00 3px dotted; position: relative; top: -190px; left: 20px; margin-bottom: -170px; z-index: 1;">
</div>
But you need everytime to put top, left, margin-bottom parameters. Can someone modify it to make working correct without pointing top, left, margin-bottom parameters?
You need the .FLA file to edit the source and recompile, unless the SWF is XML-driven. But it doesn't sound like it's something you built.
Here's how you can do a div overlay...
HTML Code:
<div>
<div id="content">Insert content here</div>
<div id="flash">Insert flash here</div>
</div>
CSS code:
#content {
background-color:#0099ff;
height:200px;
width:300px;
position:fixed;
margin-left:100px;
z-index:2;
}
#flash {
background-color:#ccff33;
height:300px;
width:600px;
position:fixed;
margin-top:100px;
}
Here is a decision how to put any link on the SWF (Flash) file ignoring its internal programm link:
<div style="position:relative;">
<div style="z-index:822; position:absolute; width:inherit; height:inherit; cursor:hand; cursor:pointer;">
<img src="transparent.gif" width="100" height="100" onclick="location.href='http://webproverka.com';">
</div>
<object >
<embed src="111.swf" loop="true" wmode="opaque" quality="high" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" height="100" width="100">
</object>
</div>
Related
I have a HTML page with a horizontally scrolling div. The swipe gesture works perfectly on my device and I can scroll horizontally through my images. I however cannot scroll horizontally with the track-pad. I'm testing on a BB Bold. Could anyone please explain to me how I get this to work, if it is possible.
Sample:
<div class="row">
<div class="col-xs-12" style="overflow-x: scroll; -webkit-overflow-scrolling: touch; white-space:nowrap; padding: 10px 0" x-blackberry-focusable="true">
<img src="toDeleteImages/1.jpg" height="100" style="display: inline-block" x-blackberry- focusable="true" />
<img src="toDeleteImages/2.jpg" height="100" style="display: inline-block" x-blackberry-focusable="true" />
<img src="toDeleteImages/3.jpg" height="100" style="display: inline-block" x-blackberry-focusable="true" />
<img src="toDeleteImages/1.jpg" height="100" style="display: inline-block" x-blackberry-focusable="true" />
<img src="toDeleteImages/2.jpg" height="100" style="display: inline-block" x-blackberry-focusable="true" />
<img src="toDeleteImages/3.jpg" height="100" style="display: inline-block" x-blackberry-focusable="true" />
</div>
</div>
Is it possible to set a checkbox instead of a split button in a split-button-list in jquery-mobile??
It seems to be easy to change it to be another button, but checkbox..
I want my checkbox to appear on a RIGHT side INSTEAD of a split button, not instead of a picture
Thanks for help..
Here is a DEMO FIDDLE
The UL does not use split icon, but instead an absolutely positioned DIV on the right with a checkbox inside. The CSS is used to position everything correctly:
<ul class="has-right-radio" data-role="listview" data-inset="true">
<li data-icon="false">
<a href="#">
<img src="http://view.jquerymobile.com/1.3.0/docs/_assets/img/album-p.jpg" />
<h3>Picture</h3>
<p>List item with thumbnail and right radio</p>
</a>
<div class="right-radio">
<input type="checkbox" name="checkbox-1a" id="checkbox-1a" checked="" />
<label for="checkbox-1a"></label>
</div>
</li>
</ul>
.has-right-radio .ui-link-inherit {
margin-right: 48px !important;
}
.right-radio {
position: absolute;
top: 0px; bottom: 0px; right: 0px;
width: 48px;
border-left: 1px solid rgb(204, 204, 204);
}
.right-radio .ui-checkbox input {
visibility: hidden;
}
.right-radio .ui-checkbox, .right-radio .ui-checkbox label {
position: absolute;
top: 0px; bottom: 0px; right: 0px; left: 0px;
}
.right-radio .ui-checkbox label {
background-image: none;
background-color: transparent;
border: 0;
}
.right-radio .ui-checkbox label .ui-btn-inner {
position: absolute;
top: 50%;
margin-top: -10px;
}
If you do not need the thumbnail, just leave out the IMG tag like the second LI in the fiddle.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<style>
.ui-btn-up-c{border:none;}
.ui-btn-hover-c{border:none;}
.ui-btn-hover-c:visited, .ui-btn-hover-c:hover, .ui-btn-hover-c a.ui-link-inherit { color:none;background:none;border:0px; }
</style>
</head>
<body>
<div data-role="page" id="myPage1">
<ul data-role="listview">
<li>
<div class="ui-grid-b">
<div class="ui-block-a" style="width: 30%;">
<div data-role="fieldcontain">
<img src="http://view.jquerymobile.com/1.3.0/docs/_assets/img/album-p.jpg">
</div>
</div>
<div class="ui-block-b" style="width: 60%;">
<div data-role="fieldcontain">
<h2>Phoenix</h2>
<p>Wolfgang Amadeus Phoenix Wolfgang Amadeus Phoenix Wolfgang Amadeus Phoenix</p>
</div>
</div>
<div class="ui-block-c" style="width: 6%; padding-top: 55px; float: right;">
<div style="float: right;">
<label>
<input name="checkbox-0 " type="checkbox">
</label>
</div>
</div>
</div>
</li>
</ul>
</div>
</body>
</html>
I've searched everywhere but couldn't find an answer for my problem, All most all questions and answers are relates to selectOneMenu. Iam using selectOneListbox component in my page as shows below
<h:selectOneListbox id="basic" value="#{location.selectedCategory}" style="width: 400px; border: none;" >
<f:selectItems value="#{location.categories}" var="y" itemLabel="#{y.title} (#{y.itemCount})" itemValue="#{y}" />
<f:ajax listener="#{location.onNodeSelect}"/>
<f:ajax render="itemsPanel" execute="#this"/>
</h:selectOneListbox>
My bean,
#ManagedBean(name = "location")
#SessionScoped
public class LocationServiceBean extends BaseService implements Serializable{
public void onNodeSelect(AjaxBehaviorEvent event) {
log.info("Entering method : onNodeSelect : ");
if(null != selectedCategory){
GetCategoriesAndItemsResponse response =getLocationSupport().getItemsByCategoryAndLocation(selectedCategory.getId(), selectedLocationId);
if(response.getStatusCode().equals("0"))
{
items = response.getData().getItems();
log.info("Items size: " + items.size());
}
}
}
}
Problem here is, above listener in the selectOneListBox doesn't get fired when i select items in the list box. Tried with primeface (3.5) component as well, but no luck.
UPDATE: added more code
<h:form id="venuForm" prependId="false">
<legend>2. Choose Venue</legend>
<div class="control-group">
<label class="span3" for="Country">Venue</label>
<div class="controls">
<h:selectOneMenu value="#{location.selectedLocationId}" id="select01" required="true"
requiredMessage="Location is a mandatory field" styleClass="span8">
<f:selectItem itemValue="#{null}" itemLabel="Select Location" noSelectionOption="true" />
<f:selectItems value="#{location.allLocations}" var="c" itemLabel="#{c.title}" itemValue="#{c.locationId}" />
<f:ajax listener="#{location.loadCategoriesListner}" render=":itemForm:categoriesPanel" execute="#this" />
<f:ajax execute="#this" render=":itemForm:itemsPanel" />
</h:selectOneMenu>
</div>
</div>
</h:form>
<h:form id="itemForm" prependId="false">
<legend>3. Choose Gift</legend>
<div class="control-group">
<p:outputPanel id="panel" autoUpdate="true">
<div style="padding-left: 5px; padding-right: 5px; padding-bottom: 5px; border: none;">
<p:panel id="categoriesPanel" rendered="#{location.categories != null}" autoUpdate="true" style=" border: none;">
<h:selectOneListbox id="basic" value="#{location.selectedCategory}" style="width: 400px; border: none;">
<f:selectItems value="#{location.categories}" var="y" itemLabel="#{y.title} (#{y.itemCount})" itemValue="#{y}" />
<f:ajax listener="#{location.onNodeSelect}" render="itemsPanel" execute="#form" event="change"/>
</h:selectOneListbox>
</p:panel>
</div>
</p:outputPanel>
<div class="clear" style="height: 30px;"></div>
<div style="padding-bottom: 5px; padding-top: 5px;">
<p:panel id="itemsPanel" style="float: left;" header="Items">
<ui:repeat value="#{location.items}" var="o" id="itemTable">
<div style="width: 170px; height: 200px; margin: auto; float: left; border-style: solid; border-color: #ECE5B6; border-width: thin;">
<div style="margin: 5px; padding: 5px;">
<div style="margin-bottom: 5px;">
<h:outputText value="#{fnc:getTitleTruncateText(o.title)}" style="margin: 0 auto; padding: 0 0 20px; color: #9A1326; width: 100px; font-size: 14px; text-align: center;" />
<BR />
</div>
<div style="padding-left: 45px; margin-bottom: 5px;">
<h:graphicImage value="http://dev.cdn.abc.com/#{o.imageId}_3.png" id="itemImage" alt="#{o.title}" />
</div>
<div
style="padding: 5px 10px; background-color: #FFC200; margin: 15px auto 0 auto; width: 100px; text-align: center; color: #29000F; border: 1px solid #F2BD00;">
<h:outputText value="$ #{fnc:formatDoubleValue(o.salePrice)}" />
</div>
<div class="clear" style="height: 5px;"></div>
<div style="float: left;">
<div style="float: left; margin-right: 50px;">
<p:spinner id="itemQty" value="#{o.selectedQty}" size="3" min="1" max="#{o.qtyAvailable}" style="width: 20px;" />
</div>
<div style="float: right;">
<h:commandButton value="Add" id="addToCartBtn" rendered="#{o.qtyAvailable > 0 }" actionListener="#{location.addItemToCart(o)}" />
</div>
</div>
</div>
</div>
</ui:repeat>
</p:panel>
</div>
<div class="clear" style="height: 30px;"></div>
<div style="float: right;">
<h:commandButton action="#{location.gotoUserDetails}" value="Next" onclick="return(validate());" rendered="#{!empty location.selectedItems}" />
</div>
</div>
</h:form>
Problem was with the converter. Problem could be solved by getting primitive type value(i.e. integer,string...) from jsf component, or creating a custom converter for classes and referencing it in component(attribute: converter).
I have a html5 date picker in my form for a mobile version of my site. All my text inputs are set to width:100% and its parent td is set to padding-right:15px to make it fit. This means my fields are nicely formatted and adjust to always fill up half of the container when the orientation of the device changes. However the date picker does not behave in the same way, can anyone help?
Form:
<form method="get" action="home">
<table id="form">
<tr><td>
<input type="text" name="Title" class="tbox" placeholder="Title" />
</td><td>
<input type="text" name="Genre" class="tbox" placeholder="Genre" />
</td></tr>
<tr><td>
<input type="text" name="Location" class="tbox" placeholder="Location" />
</td><td>
<input type="date" name="Date" class="tbox" placeholder="DD/MM/YY" />
</td></tr>
<tr><td>
<input type="text" name="postcode" class="tbox" id="postcode" placeholder="Postcode" />
</td><td>
<input type="number" name="radius" class="tbox" placeholder="Mile Radius" /><br />
</td></tr>
</table>
<input type="submit" value="Search" />
</form>
Relevant CSS:
.tbox {
background-color: #a1c9ff;
border: 1px solid #003f94;
width: 100%;
height: 30px;
margin: 3px 2px;
padding: 0 5px;
border-radius: 15px;
font-size: 18px;
float: left;
}
table#form tr td {
overflow: hidden;
padding-right: 15px;
}
.tbox {
min-width:100%;
}
table#form {
width:100%;
}
use width 100% for table#form and min-width:100% for .tbox, i hope this could solve your problem. have updated the jsfiddle http://jsfiddle.net/brfQf/1/
This css style fixes the problem in mobile Safari:
-webkit-appearance: none;
However, it changes input appearance.
It looks like .tbox has both a width of 100% and a padding. This would result in the box extending outside of its desired area. To resolve this you could try adding box-sizing: border-box;
.tbox {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
It is able to use a fixed value, So, you can use this unit to make it full screen:
width: 100vw
But you need to consider its compatibility, Here is a link about its compatibility:
http://caniuse.com/#search=vw
I am using jQuery Validation plugin, for my jQuery mobile site. The validation is hitting, but it is not displaying the error messages. Need help in figuring out what is wrong. Here is my code.
<script language="javascript" type="text/javascript" >
$(document).ready(function () {
$("#LoginForm").validate();
});
</script>
<form id="LoginForm" class="validate" action="~/Home/Search" method="get">
<ul data-role="listview" data-inset="true">
<li data-role="list-divider"><div class="center-wrapper">Secure Login</div></li>
<li data-role="fieldcontain">
<label for="FirmKey">FirmKey</label>
<input type="text" id="FirmKey" name="FirmKey" class="required" />
</li>
<li data-role="fieldcontain">
<label for="UserName">User Name</label>
<input type="text" id="UserName" name="UserName" class="required" />
</li>
<li data-role="fieldcontain">
<label for="Password">Password</label>
<input type="password" id="Password" name="Password" class="required" />
</li>
<li data-role="fieldcontain">
<input type="submit" id="submit" value="LOGIN" />
</li>
</ul>
</form>
CSS:
label.error {
float: none;
color: red;
font-size: 16px;
font-weight: normal;
line-height: 1.4;
margin-top: 0.5em;
width: 100%;
display: block;
margin-left: 22%;
}
#media screen and (orientation: portrait){
label.error { margin-left: 0; display: block; }
}
#media screen and (orientation: landscape){
label.error { display: inline-block; margin-left: 22%; }
}
If you happen to be including the jquery.validation.unobtrusive script, it will .validate() your form before you get a chance to. You need to remove the automatically added validation object from you form before you can call .validate() manually for it to function properly... something along the lines of
$("#theForm").removeData("validator")
$("#theForm").removeData("unobtrusiveValidation");