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>
Related
Greeting all,
I'm a newbie here and I just started my carrier as junior web developer. Can some help me with below situation,
I have a WordPress theme, there's some contents doesn't want to be appear so I'm trying to hide those contents by adding some coding to Additional CSS and the div element that I'm trying to hide don't have any class or id given.
Please consider the example code below (I'm not showing entire code here, its just example code exact the same with html elements)
<div id="shop">
<ul class="products">
<li class="product" style="list-style: none;">
<div class="product-inner">
<div class="product-thumbnail"></div>
<div class="product-summary">
<div class="summary-top"></div>
<div class="summary-bottom">
<div>Contents</div>
<form action="#">Form</form>
<div style="color: red;">Contents needs to be hide</div>
Link
</div>
</div>
</div>
</li>
<li class="product" style="list-style: none;">
<div class="product-inner">
<div class="product-thumbnail"></div>
<div class="product-summary">
<div class="summary-top"></div>
<div class="summary-bottom">
<div>Contents</div>
<form action="#">Form</form>
<div style="color: red;">Contents needs to be hide</div>
Link
</div>
</div>
</div>
</li>
</ul>
</div>
This solution only consider the posted code so not sure if it will also work in the actual wordpress theme, as there might be existing styles that overrides it.
The element to be hidden seems to be an error or helper text that follows a form, so perhaps this can be selected as: a div directly after a form inside summary-bottom.
Example:
.summary-bottom > form + div {
display: none;
}
<div id="shop">
<ul class="products">
<li class="product" style="list-style: none;">
<div class="product-inner">
<div class="product-thumbnail"></div>
<div class="product-summary">
<div class="summary-top"></div>
<div class="summary-bottom">
<div>Contents</div>
<form action="#">Form</form>
<div style="color: red;">Contents needs to be hide</div>
Link
</div>
</div>
</div>
</li>
<li class="product" style="list-style: none;">
<div class="product-inner">
<div class="product-thumbnail"></div>
<div class="product-summary">
<div class="summary-top"></div>
<div class="summary-bottom">
<div>Contents</div>
<form action="#">Form</form>
<div style="color: red;">Contents needs to be hide</div>
Link
</div>
</div>
</div>
</li>
</ul>
</div>
You can select the element with by using the general div tag.
We can specify this further by assuming that the div should always be a child of the .summary-bottom element, and then can either always select the third child or target the general div based on its inline style attribute.
This would leave you either with: .summary-bottom div:nth-child(2) (starting from 0) or .summary-bottom div[style="color: red;"].
Of course, how you can select such an element heavily varies on the real usage, and they are way more possibilities to do so, but both snippets mentioned should work on the above HTML code.
You can use the selector property
.summary-bottom div:nth-child(2) {
display: none;
}
Here are two potential situations in my HTML:
<div class="ptb_sold">
<span class="ptb_one_line">Sold</span>
</div>
<div class="ptb_link_button">
<a class="ptb_link_button" target="_blank" href="https://test.html">Click to Register</a>
</div>
<div class="ptb_sold"></div>
<div class="ptb_link_button">
<a class="ptb_link_button" target="_blank" href="https://test.html">Click to Register</a>
</div>
My goal is to hide "ptb_link_button" in the first one, but allow the "ptb_link_button" div to display in the second example. Basically, if the item is sold, I do not want to display the "Register" button.
I initially thought this would work:
div.ptb_sold:empty+.ptb_link_button {
display: none;
}
<div class="ptb_sold">
<span class="ptb_one_line">Sold</span>
</div>
<div class="ptb_link_button">
<a class="ptb_link_button" target="_blank" href="https://test.html">Click to Register - Link one</a>
</div>
<div class="ptb_sold"></div>
<div class="ptb_link_button">
<a class="ptb_link_button" target="_blank" href="https://test.html">Click to Register - Link two</a>
</div>
But unfortunately it does not. Any other suggestions?
If I understood you correctly, then I think this would be the approach:
// Hides the button if sold
div.ptb_sold + .ptb_link_button a.ptb_link_button {
display: none;
}
// Show the button if not sold
div.ptb_sold:empty + .ptb_link_button a.ptb_link_button {
display: block;
}
Example - https://jsfiddle.net/4o1gvnjx/
Also, I would consider changing the class name of the container for the button to be something like 'ptb_link_button-container' to avoid confusion. That way, the CSS selector would be more streamlined.
I am posting the code. In the line <div class='qrcode-value'></div> it will scan the qr code and I want to make it as link so that it will redirect to the other website once clicking on it. Instead of copy and paste.
<div id="content-overlay" style='display: none'>
<div class='qrcode-value'>
</div>
</div>
<a href="http://google.com">
<div class='qrcode-value'>
anything
</div>
</a>
fiddle https://jsfiddle.net/athulmathew/r73pn4w8/2/
You can use JavaScript to do this.
<div id="content-overlay" style='display: none'>
<div class='qrcode-value' onclick="location.href = 'https://stackoverflow.com/questions/56946816/link-to-same-page-using-div-class';">
</div>
</div>
Read more about onclick event here.
I have wracked my brain and can not find the reason this is happening. I have some links in one div that are mailto which work fine. But P tags and an image in a div in the next column seem to be inheriting the mailto.
I am using bootstrap. Has anyone come across this before? Can anyone see something I am missing?
Top of container with affected code:
<div class="row rowSettings col-sm-12">
<div class="col-sm-3 text-left sidepanel">
Some divs, then this div with the mailto links:
<li class="leftSubNavLinks"><a class="sublinks" href="mailto:email#domain.com?subject=message subject&body=prepopulated message" target="_blank"Contact</li>
and the following div that is inheriting the mailto:
<div class="col-sm-9 text-left">
<div class="col-sm-8 titleContainer">
<img src="url/image.svg" alt="">
</div>
<div class="col-sm-4 titleContainer">
<h1 class="mainTitle"> Title text</h1>
</div>
</div>
<div class="col-sm-9 clearfix">
<p class="bodyCopy" id="body-text">some text here</p>
</div>
You haven't closed your <a>
<li class="leftSubNavLinks">
<a class="sublinks" href="mailto:email#domain.com?subject=message subject&body=prepopulated message" target="_blank">Contact</a>
</li>
You aren't closing your <a> tag
<li class="leftSubNavLinks">
<a class="sublinks" href="mailto:email#domain.com?subject=message subject&body=prepopulated message" target="_blank"Contact
</li>
Should be:
<li class="leftSubNavLinks">
<a class="sublinks" href="mailto:email#domain.com?subject=message subject&body=prepopulated message" target="_blank">Contact</a>
</li>
The browser will try to "fix" your broken code by closing the tag where it thinks it should be closed. This is almost certainly not where it should be closed which is why your following HTML is being bundled up into the <a>.
I'm having problem with IE 6 (what a surprise : D)
On this site, in the content, I cannot click on the first few links. But after a few items, the links are working fine.
This problem appears if I load a page with ajax from the menu.
I couldn't figure out the problem, has anybody seen something like this before?
The HTML code is:
<div id="cont" style="display: block;">
<div class="localHeader">
<span> Szállás > Magánszállás </span>
</div>
<div class="subList">
<div class="productContainer">
<div class="img">
<img style="width: 200px;" src="/up/21/480_98_szarka2_255.jpg">
</div>
<div class="text">
<div class="productName">
<a title="Szarka család" href="/cats/showItem/21" rel="history"> Szarka család </a>
</div>
<div class="productDatas">
kato55#freemail.hu
<br>
<a title="Szarka család" href=""></a>
<br>
+36 84 314 062
</div>
<div class="productText"></div>
<a title="Szarka család" href="/cats/showItem/21" rel="history" class="moreButton"> Részletek </a>
</div>
</div>
</div>
</div>
Of course the .productContainer is repeating in the .subList.
Thanks.
Make sure that you have explicitly set overflow:auto on .productContainer. If that doesn't work, try Googling "clearfix" and see if that doesn't fix your problem.
You should ensure that your HTML validates against the DocType you're using, at the moment it doesn't and this can effect how browsers render parts of the page.
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fbalatonnet.com%2Fcats%2FlstSubCat%2F13