I have a div object (a square box) and I made it clickable by creating this css style:
.clickable {
cursor: pointer;
}
Right now clicking on the box leads no where. Where do I put the URL to redirect the user? I have multiple boxes they all need to lead to a different URL, which is to be pulled from a database via PHP. but where do I add the URL since I don't have a tag?
Rather than make the div clickable, nest it within an anchor tag:
<a href="http://google.com">
<div></div>
</a>
This is semantically correct as of html5
https://davidwalsh.name/html5-elements-links
https://css-tricks.com/snippets/jquery/make-entire-div-clickable/
I will qualify my answer by saying that you should consider what the content of your div will be. Some markup and content may not be appropriate if you are making the entire block clickable (i.e. anchor tags, button elements, etc)
UPDATE: On further research, prompted by comments below, this answer may not be optimal. It does work. It is still useful in certain
situations, but since <div></div> is now valid html it
is likely not necessary.
Additionally, remember links can be can be made display: block; which
could also solve similar problems.
Just to be clear you did not make that div clickable by adding CSS. You made it "look like" it was clickable by changing the mouse-pointer when it hovers the div.
This jQuery snippet will take ant div that contains an actual link, and make the whole div (really) clickable:
$(".clickable").click(function() {
window.location = $(this).find("a").attr("href");
return false;
});
Carry on using your CSS as well of course, as it provides visual indication that this is the case.
Related
I understand that it is possible to hide the url in the browser status bar by using javascript, but with this method, the url can be seen when the source is viewed from the browser.
how to hide URL from downloadlink?
We are using PHP Laravel.
I would like to know how to create a link button so that the user does not see the url. I am assuming that this might need to be implemented at the server (controller) side not a view side.
I would like to know the easiest way.
There are basically three different ways to hide links in HTML.
The first way is to use the tag without the href attribute. This hides the link from the HTML reader, but the link will still be clickable in the browser.
The second way is to use the tag with the href attribute, but place the entire link inside a span tag.
The third way is to place the entire link inside a span tag, and then you can use CSS to hide that span tag.
Whichever way you choose to hide the link, your link will still be clickable. When the link is clicked, it will still open in the browser window. Hiding links is very easy in HTML.
We have a website built in wordpress using WP forms.
On any page where a contact form appears there is a random _ character on the top left. This character can't be highlighted, can't be selected and doesn't appear in the DOM.
It doesn't appear to be part of any :before, :after css rules which was my first guess.
The anomaly can be found here: https://www.lazyduck.co.uk/contact-us/
Does anyone have any suggestions how to find where it came from, and why we can't inspect it?
There is a :before CSS attribute on the element <li class="choice-1 depth-1">. It looks like it's used for styling, however in the case of this page obviously it's not working very well.
If the problem only exists on the page you linked to, you can disable the box with the following CSS:
.page-id-168 .post-content ul > li:before {
display: none !important;
}
Otherwise you'll need to find a way to disable that CSS across the whole site.
Edit You can inspect the element by right-clicking on it and choosing Inspect in Chrome or Inspect Element in FireFox.
I have a WordPress site up atm where i need to hide the header and footer but still load them. I tried using css to set their display to none but they still appear on the site, is there a way to hide them, have i just done something wrong?
the site is: Link to website you can see there is a white band at the bottom.
Or maybe its a problem with something else, i am running this jquery script to set the background of the page to the browsers height.
<script>
$(window).resize(function() {
$('body').css('height',window.innerHeight);
});
</script>
Road to the solution:
Make sure the CSS rules you have created for this purpose are applicable to the elements you are talking about
Make sure that those CSS rules are the most specific CSS rules, beating any other CSS rule which is in conflict with your display: none;
Make sure you do not have display in the inline CSS
Make sure there is no script adding display value to the given tags
Make sure that your CSS is not cached
Profit
I need to embed a search form from external website. Currently I am using the IFRAME with css trick
#outerdiv{ width:446px; height:246px; overflow:hidden; position:relative; }
#inneriframe{ position:absolute; top:-412px; left:-318px; width:1280px; height:1200px; }
<div id="outerdiv"><div id="innerdiv"><iframe></iframe></div></div>
which helps to display particular div only but i want to load particular div rather than whole site and display particular div.
I tried PHP SIMPLE DOM PATSER (Fetching Data From A Specific div id Using PHP)
include('simple_html_dom.php');
$html = file_get_html("http://www.farebuzz.com");
$displaybody = $html->find('div[class=search_bg]', 0)->plaintext;
But it only gives the content without stylesheet and functionality.
So is there any way of fetching particular div along with it's style and functionality.
You seem to be on the right path. If the site from which you are trying to fetch the div from has not provided a way to embed the div, then the only alternative, as far as i can see, is to fetch the div you are interested in using some sort of script just like you did.
However to get the "style and functionality" as well, what i would do is find out which stylesheets and/or javascripts are being used in the div and just include them. If you go this way, maybe it would be best to create a separate file for the fetched content, and then call it to your site in an iFrame. That way the scripts and styles only affect the contents in the iFrame.
If you maintain the attributes/properties (of the elements you will be fetching), I see no reason why the css and/or javascript would not work.
is there a possible bit of code (php, java, css, html) that will force a page to display a print dialogue box, and by default only allow page 1 of X to be printed, or just simply set the print dialogue box to those settings?
I have a page that is being printed out via a barcode printer that likes to print lots of blank pages based on the margins and other silly stuff. I just need the content on the first page only, if possible, a print dialogue pop-up box would be even better!
Any ideas on what code type and some resources to direct me would be grand, google hasn't turned up much.
You can get a print dialog by triggering the window.print event. This will only open the browser's print dialog however, you have no control over the actual print process other than setting stuff in the dialog box that opens.
As for blank page printing, your best bet is styling the page to avoid that.
I don't know how is the structure of your page, how the blocks of divs or tables are arranged but in my case I can do it easily with CSS.
Consider you have a div with id="FAQ" and that's the only thing you want to be printed, you can do it like this:
<style>
#media print
{
body div, body table {display: none;}
body div#FAQ, body div#FAQ table {display: block;}
}
</style>
This way I hide everything except the div id="FAQ".
I don't believe this is the best way, because I use #media print to hide some divs from printing like instructions or FAQs not the other way arround, but, it is a way.
Although, bamba1 seems to have a nice answer.