I'm using Primefaces 3.2 with Tomcat 7.0.23 and JSF 2.0
i'm using the component.
<p:carousel id="aCarousel" value="#{BBCarousel.carouselItems}" var="carouselItem"
autoPlayInterval="3000"
rows="4" vertical="true" circular="true" pageLinks="0" headerText="Informations" >
<div class="thumbnail">
<img src="images/minilogo.png" />
</div>
<div class="info">
#{carouselItem.item_title}
<span class="cat">Category: #{carouselItem.item_cat}</span>
</div>
</p:carousel>
When the carousel reaches the last carousel item, the carousel slides to (move up) the first element.. instead, i would like that the last item to be attached to the first item, in a "circular way", without a break.. so i get a continuous scrolling effect..
I hope I have been clear..
thanks!
Looking at Firebug I see that the carousel is mostly a div and a hidden input that have coordinate values.
<div id="slideShow" class="ui-carousel ui-widget ui-widget-content ui-corner-all" style="width: 404px;">
<div class="ui-carousel-header ui-widget-header ui-corner-all">
<div class="ui-carousel-viewport" style="width: 404px; height: 253px;">
<ul style="left: -808px;">
<li class="ui-carousel-item ui-widget-content ui-corner-all photo">
<img id="slideShow:j_idt15" alt="" src="/showcase/images/nature1.jpg;jsessionid=A181FD9A4E1990E40E09B3743EB2EE61">
</li>
<li class="ui-carousel-item ui-widget-content ui-corner-all photo">
<li class="ui-carousel-item ui-widget-content ui-corner-all photo">
<li class="ui-carousel-item ui-widget-content ui-corner-all photo">
</ul>
</div>
<input id="slideShow_first" type="hidden" value="2" name="slideShow_first">
</div>
These values are changing at the autoPlayInterval which looks like a jQuery script is being invoked to move the image and perform an effect while doing so.
I don't see anything in the Primefaces documentation that suggest the unwanted autoplay effect can be changed. I don't think this is possible without modifying the Primefaces code.
Related
I am very new to Selenium and I am asking your kind advice.
I have the following html:
<div class="order">
<a style="float: left;" href="#137674" class="voidCmn ui-button ui-corner-all ui-widget" role="button">Void</a>
<a style="float: left;" href="printcmn.php?Id=137674" target="_blank" class="ui-button ui-corner-all ui-widget" role="button"> Print </a>
<a style="float: left;" href="section_a.php?cmnId=137674&origin=viewreferral.php" class="ui-button ui-corner-all ui-widget" role="button"> Edit </a>
</div>
In that scenario I would like to use cssSelector and not an xpath.
My code to find web element button Edit (see above):
Driver.findElement(By.cssSelector("a.ui-button.ui-corner-all.ui-widget[role='button'][href^='viewreferral.php']"));
However, I am getting an error:
no such element: Unable to locate element: {"method":"css selector","selector":"a.ui-button.ui-corner-all.ui-widget[role='button'][href^='viewreferral.php']"}
Could you kindly review and tell me what is wrong.
Please use below given css Selector, It should work :
a.ui-button.ui-corner-all.ui-widget[role='button'][href*='viewreferral.php']
You have used wrong operator to check contains. You used : ^ But it should be *
I have the below HTML. I want to fix the position of the "View All" anchor tag at a particular position. Instead the anchor tag moves as the value in the dropdown changes (i.e according to the length of the changed value in dropdown).
<div class="row " style="margin-left:75pt;">
<div class="dropdown" style="width:300px;display:inline;">
<label class="text-center" id ="categories" style="margin-top:10pt;font-size:14pt;"> Deals on</label>
<button data-toggle="dropdown" class=" btn dropdown-toggle dropdown-menu-hover-color text-center" style="padding:0px 0px;background-color:white;" href="#"><label style="font-size:14pt; color: #191970;" >{{currentCategory}}</label> <b class="caret"></b></button>
<ul class="dropdown-menu submenu-hover-color dropdown-menu-scroll" style="margin:0;">
<li>
{{page.category_name}}
</li>
</ul>
</div>
<div style="display:inline;" ng-show="deals"> View All</div>
<div style="display:inline;" ng-hide="deals"> <label class="text-center" style="margin-top:10pt;font-size:12pt;color: #909090;;">No deals found, please select a different category. </label></div>
</div>
Any pointers on how to achieve this.
Thanks in advance.
try using following html:
<div style="display:inline; position: fixed; top: 100px;" ng-show="deals"> View All</div>
Set the 'top' value as per your need. I think it should help you.
when I'm using my phone to test the app, I use the back device button to show the previous page this is working with all the pages except one page that shows a not styled page when trying to get to the pervious page so there somthing Odd. Here a briefe explanation.
there is 3 page #main_menu , #first_map , #second_map
when I'm into the #second_map page it should go to the #first_page when I press back button
but actually its showing the #main_menu page with not css styling.
could you plz tell me what is the problem an how we can fix it thank you in advance .
I provide the source code :
this is the main_page
</div>
<h2 id="thx_msg" style="margin:0 auto;"></h2>
<div class="grid2">
<div class="first" id="search_btn">
<div>
<img src="images/loupe.jpg"/>
<div>
</div>Search for a Spot</div>
</div>
<div class="second" id="submit_spot_btn">
<div>
<img src="images/spot.jpg"/>
</div>
<div>Submit a spot</div>
</div>
</div>
<ul style="margin:0 auto;" class="spaced_list" style="widht:280px;" >
<li><input type="button" data-role="none" value="Account info" class="btn" style="margin:0 auto;" id="main_page_account_info"/></li>
<li><input type="button" data-role="none" value="Log Out" class="btn" style="margin:0 auto;"id="main_page_log_out"/></li>
</ul>
</div>
here is the first_map page is named spot_page
<div data-role="page" id="spot_page" data-theme="b">
<div data-role="header" style="overflow:hidden;">
<img class="logo_icon" src="images/logo_icon.png">
</div><!-- header -->
<div class="clear"></div>
<div id="search_form_holder" style="margin:0px 25px" >
<p class="center" style="font-size:16px;font-weight:bold;">
Search for a Spot
</p>
<ul class="some_space" style="margin:0 auto;
margin-left:auto;
margin-right:auto;
align:center;
text-align:center;
width:280px;">
<li><input type="text" id="address_zip" class="field black" placeholder="Address/Zip Code"/></li>
<li id="to"></li>
<li><input type="button" data-role="none" style="width:200px;margin:15px auto;" id="search_spot_btn" class="btn" value="Search for a Spot"></li>
</ul>
<div id="hidden_scroller" style="display:none">
<select id="distance" name="Within">
<option value="1">1 Mile</option>
<option value="3">3 Miles</option>
<option value="5">5 Miles</option>
<option value="10">10 Miles</option>
</select>
</div>
</div><!-- search form -->
<div id="first_map" style="width: 100%;
height: 247px;border:1px solid black;margin:0 auto">
</div>
</div><!-- split view -->
and finally the second map here :
<div data-role="page" id="nearby_page">
<div data-role="header" style="overflow:hidden;">
<img class="logo_icon" src="images/logo_icon.png">
</div><!-- header -->
<div class="clear"></div>
<div class="second_header">Spots nearby</div>
<div id="map" style="width: 100%;
height: 398px;border:1px solid black;margin:0 auto">
</div>
</div>
As you can see the pages are separate from each other.
I have a last question could a navigation plugin help to fix the problem like jquery history plugin and thanks for your help.
Make sure to have your pages on different separate pages. If not these kind of errors will occur. Mostly, you will encounter abnormal navigation error. That is what I have experienced in my experience.
BTW, you should show more of your code for people here to help you out.
Update
PhoneGap and Android's back button do behaves odd. What I have done in my application is disabled the back button and given the soft back button on the top header. Simple history.back() will do the magic for back buttons.
You can disable as follows.
$(function(){
document.addEventListener("deviceready", onDeviceReady, false);
})
// PhoneGap is loaded and it is now safe to call PhoneGap methods
//
function onDeviceReady() {
// Register the event listener
document.addEventListener("backbutton", onBackKeyDown, false);
}
// Handle the back button
//
function onBackKeyDown() {
console.log("Back button pressed but nothing happened");
}
Anyway this is my approach. You may choose to be different.
I've a problem with anchor tags :/
I've got the following code:
<div name="divA">
<a name="A"> A</a>
</div>
<div name="divB" style="display: none;">
<a name="B"> B</a>
</div>
<div name="divHrefB">
B
</div>
My goal is that when i click on B (divHrefB) the application go to "divB" but since this element hidden it doesn't work.
Please note, that i don't want to show divB (i want a link to the place where div are... is that possible?
At this point, i'm thinking on generate dynamically the href value (in this case, i would generate the following div)
<div name="divHrefB">
B
</div>
Thanks a lot.
just don't apply display: none, just add this css for the hidden div.
<div name="divHrefB" style="height: 0px;width: 0px;overflow:hidden;">
B
</div>
You're missing the ending closing " comment.
try this guy:
style="display: none;"
you are missing " in style end
<div name="divA">
<a name="A"> A</a>
</div>
<div name="divB" style="display: none;">
<a name="B"> B</a>
</div>
<div name="divHrefB">
B
</div>
TLDR: Injecting and then replacing popup components into a div via AJAX is causing jQM to insert its own overlay elements outside of the div without removing them.
I have a jQM web page which dynamically loads the contents of a div tag on success of an ajax call:
$("#contentPane").html(data).trigger("create");
The ajax call can be made several times, each one replacing the previous contents of the div. The contents which are loaded vary: they may have identical components to what was previously there or, they may be completely different.
What I'm noticing is that if the contents I inject contain UI components which "popup" from the page (for example a dialog, or a selectmenu with data-native-menu = "false") JQM inserts overlay elements directly into the body tag or the active page tag, outside my active page's main content div.
For example:
<body>
...
<div class="ui-page ui-body-b ui-page-header-fixed ui-page-active" position="fixed" data-theme="b" data-role="page">
<div id="contentHeader" class="ui-header ui-bar-b ui-header-fixed slidedown" data-theme="b" data-position="fixed" data-role="header" role="banner">...</div>
<div id="contentPane" class="ui-content ui-body-b" data-theme="b" data-role="content" role="main">...</div>
<div class="ui-selectmenu ui-overlay-shadow ui-corner-all ui-body-a pop ui-selectmenu-hidden">...</div>
<div class="ui-selectmenu-screen ui-screen-hidden"></div>
</div>
...
<div class="ui-page ui-body-c ui-dialog ui-overlay-a" data-overlay-theme="a" data-theme="c" data-role="dialog" tabindex="0" style="min-height: 399px;">
</body>
The problem is that whenever I replace the contents of my "contentPane" div, these overlay elements stay in the DOM. If the new contents I inject require overlay elements as well, JQM creates new ones without removing the stale ones. So eventually my DOM looks like this:
<div class="ui-page ui-body-b ui-page-header-fixed ui-page-active" position="fixed" data-theme="b" data-role="page">
<div id="contentHeader" class="ui-header ui-bar-b ui-header-fixed slidedown" data-theme="b" data-position="fixed" data-role="header" role="banner">...</div>
<div id="contentPane" class="ui-content ui-body-b" data-theme="b" data-role="content" role="main">...</div>
<div class="ui-selectmenu-screen ui-screen-hidden" style="height: 3150px;"></div>
<div class="ui-selectmenu ui-overlay-shadow ui-corner-all ui-body-a pop ui-selectmenu-hidden">...</div>
<div class="ui-selectmenu-screen ui-screen-hidden"></div>
<div class="ui-selectmenu ui-selectmenu-hidden ui-overlay-shadow ui-corner-all ui-body-a pop">...</div>
<div class="ui-selectmenu-screen ui-screen-hidden"></div>
<div class="ui-selectmenu ui-selectmenu-hidden ui-overlay-shadow ui-corner-all ui-body-a pop">...</div>
<div class="ui-selectmenu-screen ui-screen-hidden"></div>
<div class="ui-selectmenu ui-selectmenu-hidden ui-overlay-shadow ui-corner-all ui-body-a pop">...</div>
<div class="ui-selectmenu-screen ui-screen-hidden"></div>
<div class="ui-selectmenu ui-selectmenu-hidden ui-overlay-shadow ui-corner-all ui-body-a pop">...</div>
</div>
Now this isn't a HUGE issue, as it doesn't break any functionality, but seeing how this is a mobile app, bloating up the DOM can lead to slow performance if it gets out of hand.
What I'm wondering is if there is some way I can tell JQM to clean up any of these stale DOM elements, or if there is a way I can check if any of these overlays have gone stale myself, say by using $(".ui-overlay-shadow, .ui-overlay-a") and then checking some property.
You could save the elements you inject into your page into a variable then use the .remove() operator from jQuery, Documentation.
var injectedDomElement = ...;
$(document).one("pagehide", function(){
injectedDomElement.remove();
}