I am customizing an HTML page provided and hosted by a third-party, so I am severely restricted in what I can do to the page. On the page there is a navigation menu that looks like this.
<ul class='nav'>
<li class='active'>
<a href='/affiliate'>
<span id='affiliate-nav-homepage'>
<span class='default'>Home Page</span>
</span>
</a>
</li>
<li>...
Question: How can I make the above snippet display the text "Home" instead of "Home Page", if all I am allowed to do is add a <style> element in the page <head>; and add some HTML code (which may include Javascript) near the start of the page?
I have a considered going down one of these two paths, but both paths are problematic.
1) Use CSS to hide their text ("Home Page"). Add my own text ("Home") using :before or :after pseudo-selectors.
display: none is probably not a good way to hide the text, because browsers that don't understand :before and :after will still understand display: none and I will end up with no text at all.
Are there better CSS alternatives for me? Change font size to 0? change text color? Manipulate z-index somehow? It is OK if some older browsers display the text "Home Page". It is not OK if some browsers display "Home Page Home", or if some browser do not display any text at all.
-- OR --
2) Use Javascript to manipulate the DOM
The difficulty with Javascript is that I can only insert it near the start of the page body before the elements that I want to modify. I could hook an event that fires after the entire page is loaded, but I want to avoid the page text flashing (the text "Home Page" being displayed briefly and then changing to "Home"). Is there such an event and how would I hook it?
Thank you for you help.
Anti flashing fix:
.default { display: none; }
Changing text and showing, when document is ready:
body.onload = function (){
//getElementsByClassName not working in old browsers, so ...
var el = document.getElementById('affiliate-nav-homepage').getElementsByTagName('span')[0];
el.innerHTML = 'Home';
el.style.display = 'block';
};
Additional You can hide all content and show it after all javascript changes by this method.
This is not elegant solution, but as You say, You have limited options to resolve Your problem.
In JavaScript
window.addEventListener("load", function(){
document.querySelector("span.default").textContent = "Home";
//using document.querySelector to select the span with classname default
//using textContent to change the content of the node.
}, false);
In a script block will do it.
This will execute on page load. This will be executed so fast that in almost all cases you won't see text jumping.
Example:
window.addEventListener("load", function(){
document.querySelector("span.default").textContent = "Home";
}, false);
<ul class='nav'>
<li class='active'>
<a href='/affiliate'>
<span id='affiliate-nav-homepage'>
<span class='default'>Home Page</span>
</span>
</a>
</li>
</ul>
When your page loading becomes slowed by other resources, #Mateusz Mania's idea of using CSS to hide the element and bring it up again is actually pretty nice. I would suggest using opacity: 0 or visibility: hidden instead of display:none since the latter will remove the element from the page and when it becomes visible again it will make the content jump down below it.
Exploring the CSS option
#affiliate-nav-homepage:before{
content: "Home";
}
.default {
display: none;
}
<ul class='nav'>
<li class='active'>
<a href='/affiliate'>
<span id='affiliate-nav-homepage'>
<span class='default'>Home Page</span>
</span>
</a>
</li>
</ul>
Related
Fairly often I get the request to update all instances of a color on a site to a different color
For example:
Across the entire website, for any element that it currently #51284F (text, buttons, etc,) please update the color to #4F9CEC
Of course, this would normally be done with CSS in the style sheet. However, this is a very large website with hundreds of pages, and we aren't sure exactly which elements are currently set to #51284F, and which pages might contain an element that is set to #51284F. Additionally, this request comes up often, so it would be helpful to have an efficient way to change all the colors at once as opposed to manually going through each page and writing CSS for every element that needs a color update.
So, using JavaScript, is there any way to search the entire website for any element that is currently set to #51284F and update its color to #4F9CEC?
The HTML would look something like this:
<div class="header-default" data-widget-name="header-default" data-widget-id="template-header1">
<ul class="tels">
<li class="tel phone1 collapsed-show" data-click-to-call="Sales">
<span class="type">Sales</span>
<span class="separator">:</span>
<span class="value">123-456-7890</span>
</li>
<li class="tel phone2 " data-click-to-call="Service/Parts">
<span class="type">Service/Parts</span>
<span class="separator">:</span>
<span class="value">123-456-7890</span>
</li>
<li class="tel phone3 " data-click-to-call="Body Shop">
<span class="type">Body Shop</span>
<span class="separator">:</span>
<span class="value">123-456-7890</span>
</li>
<li class="tel phone4 " data-click-to-call="Local">
<span class="type">Local</span>
<span class="separator">:</span>
<span class="value">123-456-7890</span>
</li>
</ul>
</div>
The CSS would look like this:
.header-default .tels { color: #51284F; }
Unfortunately, these are template sites, so we don't edit the HTML on a site-by-site basis. The HTML itself pulls from the particular template that the site is on
Thank you so much!
Maybe something like this?.. I'm not sure there is no syntax mistake. But you could try
$('*').filter(function () {
var selectColor = 'rgb(0,0,0)';
return ($(this).css('color') == selectColor);
}).css('color', "some new color");
It would be helpful if you could provide the code of the elements you are looking to update. Specifically their html and css formats.
Just click the folder with the right mouse button in sublime text and click FIND IN FOLDER, a box will appear in the bottom with "FIND" and "REPLACE" values, set find to #51284F and replace to #4F9CEC. Save all.
try something like this
<!DOCTYPE html>
<html>
<head>
<style>
[class*="te"] {
background: yellow;
}
[style*="color: red;"] {
font-size: 50px;
}
</style>
</head>
<body>
<div class="second" style="color: red; background-color: black;">The first div element.</div>
<div class="my-test">The second div element.</div>
</body>
</html>
I am using Selenium Webdriver for my project. I have a webpage where there are multiple menu items which in turn has sub menu items. I want to replace the classname attribute for all child elements under the nav-left-main div tag with "" (space) so that all elements are visible in the main page to click (instead of navigating to each menu->sub menu)
Basically i want to find all elements with classname under id=main and replace them with ''. How do i do that with JavaScriptExecutor in selenium webdriver?
<div id="nav-left-main">
<div>
<a class="left-nav-icons icomoon-icon-users3 " title="Users" href="#Users-tab">
<div id="Users-sub" class="nav-left-subnav">
<div id="Users-tab" class="hidden-menu">
<ul class="level3menu">
<li>
<i class="cm-icon18 iconfont-arrow-sans-right" style="margin-top:-2px;margin-left:-17px;"></i>
<a>Users</a>
<ul class="second-level-hidden-menu" style="margin-left:5px;margin- top:10px;">
<ul class="second-level-hidden-menu" style="margin-left:5px;margin-top:10px;">
<ul class="second-level-hidden-menu" style="margin-left:5px;margin-top:10px;">
</li>
</ul>
<ul>
<li>
<a id="AdminGroups" class="$item.className" title="" href="cms?action=groupList&pageTitle=Groups">Groups</a>
</li>
</ul>
<ul>
</div>
</div>
</div>
This might work for you:
var main_div = document.getElementById("nav-left-main");
var all_childs = main_div.getElementsByTagName("*"); // get all child elements
for (var i=0; i<all_childs.length; i++)
{
if ( all_childs[i].hasAttribute("class") ) all_childs[i].className = ""; // or all_childs[i].removeAttribute("class")
}
I'm assuming you're trying to write some automated tests. Consider this: if you modify the UI content, you just might affect the behavior of something else on the page (e.g. some JS assuming those class-attribute values might stop functioning).
Alternatively, inject CSS (via STYLE or LINK) that changes the appearance and visibility of those elements (hint: !important). However, even this, theoretically, is not ideal solution, because like-JS (for example) might go bananas for the same reason.
I'm not experienced in testing webpages, but isn't the point of Selenium to automate behavior of a human user? In other words, maybe the best would be to write test-code to activate the menu the same way human-user would (mouseover, etc).
In short, I am trying to have an HREF menu with Javascript functions to display DIVs. However, my concern is that while I could have two seperate DIVs, one with Javascript if enabled, and one with No JAvascript enabled, I do not want to duplicate raw content on my page (as spiders will index Display: none html)
I am not familiar with functions of javascript, and best practices. My instinct is to string replace the DIVs for a specific id style tags when javascript is present..
Ie, logic that if javascript enabled, then replace text of style tags to to display=none (for specific ID's)
Also - is there a way to be nonspecific with javascript. Such as if i have contentid1,contentid2,contentid3,contentid4,contentid5,contentid6 I could use, via regular expression or equivalent for contentid 2-6
I will use this on multiple pages where contentids change. I do not know if i should create a javascript conditional style, as I am not sure how that style would be applied for multiple IDs (seen here)
Hide html only when Javascript is available
Heres my current code
<script type="text/javascript">
function showHide(d)
{
var onediv = document.getElementById(d);
var divs=['content1','content2','content3','content4'];
for (var i=0;i<divs.length;i++)
{
if (onediv != document.getElementById(divs[i]))
{
document.getElementById(divs[i]).style.display='none';
}
}
onediv.style.display = 'block';
}
</script>
then here is my menu
<ul>
<li>link1</li>
<li>link2</li>
<li>link3</li>
<li>link4</li>
</ul>
Then here is my content (note, i leave the content1 div visible by default
<div id="content1" >Content</div>
<div id="content2" style="display: none;">Stuff</div>
<div id="content3" style="display: none;">Things</div>`
I would like to avoid flickering if possible, and page refreshing if possible. Like could there be a condition so that content2+ have inlinestyle changed to hidden. If no javascript, my paeg just becomes really, really long.
?
Sorry-rambling. Tired, and have pneumonia :)
I don't know if I'm in the right place to ask this question.
I'm looking for examples or tutorials of vertical or side tabbed content where contents appear on the side. Like normal tabbed contents but this time sideways (preferably tabs on the left). But it seems that there's not a single thing about it online even using Google. Therefore I'm lost.
Or maybe I don't know the name of this technique.
Also I don't want to use jquery ui for this.
Can someone show me the way please?
Many thanks
Without jQueryUI you could do something very easy and clean like this (demo => http://jsfiddle.net/steweb/zwaBx/)
Markup:
<ul id="tabs-titles">
<li class="current"> <!-- default (on page load), first one is currently displayed -->
first
</li>
<li>
second
</li>
<li>
third
</li>
</ul>
<ul id="tabs-contents">
<li>
<div class="content">first content first content first content</div>
</li>
<li>
<div class="content">second content</div>
</li>
<li>
<div class="content">third content</div>
</li>
</ul>
CSS:
#tabs-titles{
float:left;
margin-right:10px;
}
#tabs-titles li{
cursor:pointer;
}
#tabs-titles li.current{
font-weight:bolder;
}
#tabs-contents{
background:#F2F2F2;
margin-left:100px;
padding:5px;
}
#tabs-contents li{
display:none;
}
#tabs-contents li:first-child{
display:block; /* first one content displayed by default */
}
JS: (simple jQuery, no UI)
var tabs = $('#tabs-titles li'); //grab tabs
var contents = $('#tabs-contents li'); //grab contents
tabs.bind('click',function(){
contents.hide(); //hide all contents
tabs.removeClass('current'); //remove 'current' classes
$(contents[$(this).index()]).show(); //show tab content that matches tab title index
$(this).addClass('current'); //add current class on clicked tab title
});
Here's one of many free tutorials: Vertical Tabs for jQuery lovers!
I found this one in pure javascript with no jquery:
http://webdevel.blogspot.com/2009/03/pure-accessible-javascript-tabs.html
Haven't tested it yet. I also found this one that uses no jquery, but leverages html5 and css3:
http://www.my-html-codes.com/javascript-tabs-html-5-css3
It seems my most successful search phrase for this topic is "pure javascript tabs" (without the quotes, of course). You'll find a those above plus some others if you run that search.
Found an example using jQuery UI
http://jquery-ui.googlecode.com/svn/trunk/demos/tabs/vertical.html
If you look at the source, it seems like they're just adding a class which positions it vertically and not horizontally
I've been having nothing but problems with this script for a simple hide/show gallery of testimonials.
I think the java is somewhat self explanatory...
When the page loads, I tell it to show the first testimonial in the line up (as the css is display:none) and gives it a selected class name. Works fine in across the board.
On click I want it to remove the selected class place it to another, and then hide the first testimonial and pull up a corresponding one. Except all that happens here is the first testimonial disappears (hide) and the selected class is added.
<script type="text/javascript">
$(document).ready(function(){
$(".testimonial:first").show();
$("li.testID:first").addClass("selectedName");
$("li.testID").click(function(){
$("li.testID").removeClass("selectedName");
$(this).addClass("selectedName");
$(".testimonial").hide();
$(this).next(".testimonial").fadeIn("slow");
});
});
</script>
Example of markup
<ul id="testName">
<li class="testID">Persons Name</li>
<blockquote class="testimonial">
<span class="bqStart">“</span>
Testimoinal here
<span class="bqEnd">”</span><br /><br />
<span class="testAuthor"><b>Name</b><a target="_blank" href="#">Website</a> Company</span>
</blockquote>
As a side note this is working fine in FF and Safari
Your help is greatly appreciated.
Thanks.
It's probably not working in IE because it's not valid markup: you can't have a blockquote as a direct child of a UL, so IE probably stores them in some weird place in the DOM tree which means .next doesn't find them. Can you move the blockquote elements into the li?
Is .testimonial the class you have given to your lists? <ul> or <ol>
It seems as if you are trying to get the next testimonial list to show, when infact you are actually getting the next <li> which has a class of .testimonial which I suspect is incorrect as you are using .testID as the class for your list items.
Please try this instead:
$(this).parent().next(".testimonial").fadeIn("slow");