I have a xsl code that I would like to show a nested row below each row that the user chooses.
Let's say I have a row that shows 4 columns with the main order details, I want the user to be able to click a plus or 3 dots "..." to see more details about this order.
I have all the information loaded already to the xml on the page so there is no need to go to the db again for the details.
Is this possible?
Example will be appreciated.
Thanks.
A crude example to show how its done in javascript! :) In IE click on "allow blocked contents"
<html>
<head>
<script language="javascript" type="text/javascript">
var f=0;
function tnd()
{
if(f==1)
{
var str2="The images, quotes and everything else are intended to be maintained strictly confidential. Rightclick of the mouse has been disabled, as well as alt+printscreen and copy options do not work well in major browsers. design:aravind"
document.getElementById("t_n_d").innerHTML=str2;
f=0;
return 1;
}
if(f==0)
{
var str1="to read features, terms and conditions about this design."
document.getElementById("t_n_d").innerHTML=str1;
f=1;
return 1;
}
}
</script>
</head>
<body>
<span id='footertext'
style="font-size: 12px;"><span onmousedown='tnd();' style='color: red; text-decoration: underline; cursor: pointer;'>click here</span> : <span id='t_n_d'>to read features, terms and
conditions about this design.</span></span></td>
</tr>
</body>
</html>
Copy the html code in "str2" to load tables .. pictures or etc ..
(ps: replace double-quotes with single-quotes in str2)
also please note that javascript is a client-side script .. it is harms performance on over usage .. this is just to give you an idea.
Related
I have to inject a Codesnippet on a specific place in a html.
For example:
<section class="newsletter">
content content content
</section>
Now I want the Tagmanager to inject on this section another code instead of the section newsletter.
<div class="injector">
content content content
</div>
Ive tried some scripts but none of them showed the content. The custom html has been loaded, but did not replace the section.
How should i do this?
Thank u!
you can use a custom script to append the content in an HTML tag
for example and with the provided data, using Jquery.
The only thing that you have to care about is that the function is executed, in this case i'm using a anonymous function
<script>
(function(){
var div = document.createElement('div');
var h1 = document.createElement('h1');
h1 = $(h1).text('tille');
div = $(div).text('content content content')
div = $(div).attr('class','injection')
div = $(div).append(h1)
$('.post-text').append(div)
}
)()
</script>
I made it this way:
<script>
jQuery('div#container_to_hang_on').append('<div id="injector"></div>');
</script>
But you #Kemen Paulos Plaza said its not recommended at all. Why? Is there a better way?
When i open the "/search/label/" pages, it shows "older" (sonraki) tab on the right corner of the page that goes nowhere .
Like: http://www.ahmetvarlik.com/search/label/Maketler%20ve%20Objeler
Here what happens when i click the this button: http://www.ahmetvarlik.com/search/label/Maketler%20ve%20Objeler?updated-max=2000-02-01T23:49:00-08:00&max-results=20&start=20&by-date=false
İ just want to delete this "older" (sonraki) section on my pages. (not from posts).
Can you help me?
Add this code before </body> tag to hide blog pager on label pages
<b:if cond='data:view.isSearch'>
<style>
.blog-pager { display: none; }
</style>
</b:if>
Is there any way identify the button "Connect" by the string "Test Engine 0728" then click it with the method find_element_by_xpath or any other method in python+selenium environment. Thanks a lot!
<html
<head
<body
<div class="page" id="main-page"
<div class="controls" id="Engines"
<div class="devices" id="Devices-List"
<h3 class="device-name">Test Engine 0728 </h3>
</div>
<button>Connect</button>
...
This xpath should work for you:
driver.find_element_by_xpath("//h3[contains(text(),'Test Engine 0728')]/../../button[contains(text(),'Connect')]").click()
There are certainly multiple ways to find the button.
One option would be to start your xpath expression with the div with id Engines, check that it contains the h3 tag with Test Engine 0728 text in the div with Devices-List id. Then, get the button by Connect text:
button = driver.find_element_by_xpath('//div[#id="Engines" and div[#id="Devices-List"]/h3[contains(., "Test Engine 0728")]]/button[. = "Connect"]')
button.click()
Or, another option would be to find the div with Devices-List id, check for the h3 tag's text inside and get the following button sibling:
//div[#id="Devices-List" and h3[contains(., "Test Engine 0728")]]/following-sibling::button
This one also should work:
connectButtonClick = driver.find_element_by_xpath("//div[#class='controls'][#id='Engines'][contains(., 'Test Engine 0728')]//button[text()='Connect']").click()
I am designing a site that has images that when hovered over fade a text appears.
I have used the below thread to do this, all went well however when the text I am adding in goes to the full width and height of the image it's going over. I've tried to add padding to the text through my CSS but it doesn't work.
DIV with text over an image on hover
Here is my amended code, amended
CSS
p1{font-size:1.3em;text-align:left;color:#ffffff;font-family: 'geosanslightregular';margin:100px 20px 0px 20px;padding:0;}
div.containerdiv{position:relative}
div.texts{position:absolute; top:0; left:0; width:100%; display:none; z-index:10}
div.texts:hover{display:block}
html
<div class="grid_8">
<a href="cncpt.html">
<div class="containerdiv">
<img src="images/cncpt.jpg" alt="background">
<div class="texts">
<p1>LAUNCH OF E-COMMERCE MENSWEAR STORE, STOCKING EVERYONE FROM BALMAIN AND GIVENCHY TO ADIDAS X OPENING CEREMONY, YMC, NIKE AND BEYOND. BREAK HOSTED THE LAUNCH EVENT AND INTRODUCED 200+ KEY MEDIA, BRAND AND INDUSTRY CONTACTS TO THE STORE. WE CONTINUE TO OPERATE THE PRESS OFFICE FOR CNCPT AND HAVE PICKED UP FANS EVERYWHERE FROM GQ DAILY AND METRO, TO KEY ONLINE INFLUENCERS.</p1>
</div>
</div>
</a>
</div>
<!-- end .grid_8 -->
Still no joy! it's showing the image fine but no text is showing over it or anywhere on the page for that matter!
Any ideas on how to solve this would be greatly appreciated.
Thanks,
John
A simple answer using CSS is to use the :hover pseudo class on an anchor tag.
Set you image container as position:relative in CSS.
Create a div containing your text, formatted using html and CSS inside the image container. Position this absolute in CSS. Absolute positioning positions elements relative to the parent container positioned relative. If no element is set to position relative it will take its position from the body tag. It is important to set a width to the element too.
THE HTML
<div class="container">
<a><img src="img.jpg" alt="background">
<div class="text">I will show on hover</div>
</a>
</div>
CSS
div.container{position:relative;}
div.text{ position:absolute; top:0; left:0; width:100%; display:none; z-index:10;}
a:hover div.text{display:block;}
This will position the text over the container you set to position relative aligning to the top left corner. The z-index stacks elements one above the other. The higher the z-index the higher the element is in the stack.
w3 schools have some excellent definitions and examples on all the code above if it is new to you.
The effect you are after can be achieved with html and css alone. I would advise you focus on:
design your site on paper
layout your page with html and CSS
add your rollover effects and jQuery animations
before adding the jQuery animation
CSS3 transitions are not compatible with all browsers, there are work arounds in CSS though a jQuery fallback is often used.
I’m trying to create a simple menu where I’ve got four menu items each have an image and then there is a special image for each item that is active.
I’m using Drupal so the HTML output can’t be changed (not easy anyway) so my question is if and how it can be done by using the HTML code provided below:
<div id="quicktabs-2" class="quicktabs_wrapper quicktabs-style-nostyle quicktabs-processed">
<ul class="quicktabs_tabs quicktabs-style-nostyle">
<li class="qtab-0 active first">Question</li>
<li class="qtab-1">Lead</li>
<li class="qtab-2">Board</li>
<li class="qtab-3 last">Ready</li>
</ul>
</div>
I have created some that come close to my final wished result but I’m still having trouble with example to indent the text so it is not showed.
Here is my CSS so far:
ul.quicktabs_tabs li {display:inline; }
#quicktabs-2 li.active a {
background-image:url(question-active.png);
background-position:5px 0px;
background-repeat:no-repeat no-repeat;
padding-bottom:18px;
padding-left:135px;
padding-right:5px;
}
#quicktabs-2 li.qtab-1 a {
background-image:url(lead-grey.png);
background-position:5px 0px;
background-repeat:no-repeat no-repeat;
padding-bottom:18px;
padding-left:29px;
padding-right:50px;
}
#quicktabs-2 li.qtab-2 a {
background-image:url(board.png);
background-position:5px 0px;
background-repeat:no-repeat no-repeat;
padding-bottom:18px;
padding-left:29px;
padding-right:50px;
}
#quicktabs-2 li.qtab-3 a {
background-image:url(ready-grey.png);
background-position:5px 0px;
background-repeat:no-repeat no-repeat;
padding-bottom:18px;
padding-left:29px;
padding-right:50px;
}
This is my code so far and it shows my images correctly with the right spacing between them but the text within the a-href I just can’t get hidden.
I’m fairly certain that it is just a question of hitting the right style-class / id but I’ve tried a lot of different combination and I just can’t get it to work.
Any help would be very much appreciated.
Thank you
Sincere
- Mestika
If you want to hide your text within your anchor tag simply add {text-indent:-9999px} this will move your text to -9999px but will hide your text. This method is called IR - Image Replacement
Edit: Here is a Reference provided by #Faust
It sounds like your main concern is to replace the text in the link (no?).
If you have the access to alter the link text, and you're allowed to include markup with those values that does not get HTML-character encoded,
Then by surrounding each link text with spans ( e.g: Question --> <span>Question</span>), so that each line looks like:
<li class="qtab-0 active first"><span>Question<span></li>
...then you can hide the text with this CSS:
#quicktabs-2 a span {display:none;}
Otherwise, I think your only other recourse is to make the text extremely small and close to the color of the images:
#quicktabs-2 a {font-size:1px;text-decoration:none;color:grey}