FitText functions normally in the titles and paragraphs, but does not work on the links (<a> href ... </ a>).
Please, any tips?
Solved as follows (example):
CSS:
.content_options {
width:95%;
position:absolute;
top:8%;
left:0;
}
HTML:
<div class="content_options">
<ul>
<li><p class="fittext5">Option 1</p></li>
<li><p class="fittext5">Option 2</p></li>
<ul>
</div><!-- content_options -->
Related
For the life of me I cannot get control of anything in this modal. I just want to click on this dang save button.
For all the other modals that are like this I am able to use this code successfully:
#driver.switch_to.frame #driver.find_element(:xpath, "//*[contains(#name, 'modal')]")
I get a not found error this time around though.
Here's the html of the modal i'm trying to access -NOTE the modal number changes so I can't hard code modal3:
and here's the html for the button:
<html class=" ext-strict">
<head>
<body class=" ext-gecko ext-gecko2" keydownhandlerset="true">
<div id="patientChartsContainer">
<div id="patientSearch" style="display:none">
<div class="tooltipWrapper">
<div id="patientPhotoContainer"></div>
<div id="modalWindowContainer" class="">
<div class="axShadowLayer window local" style="display: block; width: 558px; height: 453px; left: 384px; right: auto; top: 228px; z-index: 1010;">
<div class="axShadowTopRow">
<div class="axShadowMiddleRow">
<div class="axShadowBottomRow">
<div class="axShadowContentLayer">
<div class="priModalWrapper">
<ul class="priModalHeader">
<div class="priModalContentBackground"></div>
<ul class="priModalFooter">
<div class="priModalContentWrapper">
<div class="priModalContentContainer">
<iframe id="modal1" class="windowFrame" name="modal1" src="/chart/ui/desktop/patientCharts/chartSummary/chartNote/createChartNote/createNoteModal.html" allowtransparency="true" frameborder="0">
<!DOCTYPE html>
<html class=" ext-strict" xmlns="http://www.w3.org/1999/xhtml">
<head>
<body class=" ext-gecko ext-gecko2" keydownhandlerset="true">
<div id="newNoteContainer" class="newEncounterNote">
<ul class="newNoteOptions">
<div class="axModalButtonsFooter">
<div class="footerButtonsWrapperRight">
<div class="buttonClass axSaveButton">
<span>Save</span>
I've tried a few things and variations of what I have below:
##driver.find_element(:xpath, "//div[#id='modalWindowContainer']/div/div[4]/div/ul/li/div[2]/div[3]").click
##driver.switch_to.frame #driver.find_element(:xpath, "//*[contains(#name, 'modal')]")
##driver.switch_to.default_content
##driver.switch_to.frame(#driver.find_element(:class, 'windowFrame'))
##driver.find_element(:css, "div.buttonClass.axSaveButton").click
##driver.switch_to.frame #driver.find_element(:class, 'windowFrame')
##driver.find_element(:xpath => "//button/span[contains(text(),'Save')]").click
/html/body/div1/div/div/div/span
Try:
##driver.switch_to.default_content
##driver.switch_to.frame #driver.find_element(:class, 'windowFrame')
##driver.find_element(:css, "div.buttonClass.axSaveButton > span").click
This will:
reset the frame context
find the proper iframe
Click on the span (which has the save text, and might hold the listener) element in the <div class="buttonClass axSaveButton"> tag
Is there a way to set the panel bar to a specific height (ie. 300px), and make that specific section scrollable if it's too long?
Assuming that you have your panelbar defined as a ul, something like:
<ul id="panelbar">
<li class="k-state-active">
<span class="k-link k-state-selected">My Teammates</span>
<div style="padding: 10px;">
<div class="teamMate">
<img src="../../content/web/panelbar/andrew.jpg" alt="Andrew Fuller">
<h2>Andrew Fuller</h2>
<p>Team Lead</p>
</div>
<div class="teamMate">
<img src="../../content/web/panelbar/nancy.jpg" alt="Nancy Leverling">
<h2>Nancy Leverling</h2>
<p>Sales Associate</p>
</div>
<div class="teamMate">
<img src="../../content/web/panelbar/robert.jpg" alt="Robert King">
<h2>Robert King</h2>
<p>Business System Analyst</p>
</div>
</div>
</li>
<li>
Projects
...
</li>
</ul>
You should define a CSS style as:
#panelbar {
height: 300px;
overflow-y: scroll;
}
See an example here: http://trykendoui.telerik.com/#OnaBai/ifus
The solution above scrolls the entire control. Here's how to scroll the panel's items.
Click here for the Dojo example
I'm trying to separate this ul to be two columns splitting after "Lotus Notes Administration (this is for my resume) Can someone help me with the CSS?
<section>
<h4>Technical Expertise</h4>
<div id="skills">
<ul>
<li>HMTL5</li>
<li>SQL</li>
<li>XHTML</li>
<li>Networking</li>
<li>End User Training</li>
<li>Inventory Management</li>
<li>SDLC</li>
<li>Active Directory Administration</li>
<li>Lotus Notes Administration</li>
<li>XML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>PHP</li>
<li>SEO</li>
<li>Technical Support</li>
<li>Procurement</li>
<li>Software Testing</li>
<li>Project Management Best Practices</li>
<li>GPO</li>
</ul>
</div>
</section>
You could do something:
<div class="Skills>
<div style="float: left; width: 50%;"><ul>List A</ul></div>
<div style="float: left; width: 50%;"><ul>List B</ul></div>
</div>
<div id="menu">
<ul>
<li>Menu link</li>
</ul>
</div>
<div id="content">Dummy content</div>
I want to get the UL tag using parent id.
The condition is if the UL tag is missing, i need to apply new class for the Content Div.
script
document.observe("dom:loaded", function() {
if( --------)
{
$('content').removeClassName('fwidth');
}
else{
$('content').addClassName('fwidth');
}
Thanks
I don't really understand your question, but if you want to find out if <div id="content"> has ul elements, try
if ($('content').down("ul"))
my autocomplete call is showing nothing right now, because the div that i am inserting the ul into has its style set to display:none. using firebug, i can see the results are returned in a proper unordered list tag and when i edit the html from the firebug console and remove the style="display:none;", i see the autocomplete results. i added css for the autocomplete tags that are generated but this is getting overwritten by prototype 1.6.1/scriptaculous 1.8.3. also, i'm using rails 1.2.2
here is the code from my view:
<script type="text/javascript">
new Ajax.Autocompleter("autocomplete", "autocomplete_choices", "/campaigns/title_list", {tokens: ',', paramName: 'title'});
</script>
<input type="text" id="autocomplete" name="autocomplete_parameter"/>
<div id="autocomplete_choices" class="autocomplete"></div>
and here my controller action and partial:
def title_list
camp_title = params[:title]
#titles = Campaign.find(:all, :conditions => ["title ilike ?", "%#{camp_title}%"], :select => :title).collect { |camp| camp.title }
render :partial => "title_list"
end
_title_list.rhtml
<ul>
<% #titles.each do |t| %>
<li> <%= t %> </li>
<% end %>
</ul>
here's what i seen in firebug:
<div style="display: none; position: absolute; left: 8px; top: 123px; width: 155px;" id="autocomplete_choices">
<ul>
<li class="selected"> DirecTV Defender (Best Deal Ever) </li>
<li class=""> Defender DirecTV </li><li class=""> DirecTV Defender - Collections </li>
<li class=""> Defender DirectTV (Gotham Direct) </li>
</ul>
</div>
any suggestions would be greatly appreciated.
-h
You need to go into the auto_complete helper (inside the vendor directory) and change the line items.uniq to items.uniq.join
The reason is a change in the to_s behavior of Arrays in Ruby 1.9. Worked fine for me like this.