I have a similar question as this thread, but the answer doesn't seem to be listed anymore. I have a list of tiles that show a property image and some relevant information. I'd like each to be a full link to another page with more information on the property.
I've made my tiles into a directive, and currently the html content of that directive is wrapped in an anchor tag. Which works to reach my specified link, however that anchor tag only matches the height of the mdGridTileFooter.
Is there a way to make the entire tile clickable? So that the user can click on any part of it and access the intended link (not just the bottom footer?
The HTML Directive:
<a ng-click="spVm.linkToProperty(proforma)" ng-href="{{spVm.path}}">
<div>
<md-grid-tile-footer class="saved-prop-address">
<div class="saved-prop-address-title" ng-bind="spVm.city"></div>
<div class="saved-prop-address-subtitle"
ng-bind="proforma.listing.update_date | date: 'MMMM dd'"></div>
</md-grid-tile-footer>
</div>
</a>
The HTML Page with the Tile List:
<md-grid-list md-cols-xs="2"
md-cols-sm="3" md-cols-md="3" md-cols-gt-md="6"
md-row-height="1:1" md-gutter="4px">
<md-grid-tile class="saved-prop"
ng-repeat="proforma in sdVm.pageGroups[sdVm.saved.idx]"
ng-click="sdVm.showSelectedProperty(proforma); sdVm.linkToProperty(proforma)"
ng-href="{{sdVm.path}}"
ng-style="{'background-image':'url({{proforma.thumbnail_url}})'}">
<pgo-saved-property proforma="proforma">
</pgo-saved-property>
</md-grid-tile>
</md-grid-list>
Thank you!
Since it looks like the directive had no height, adding any responsive height/width styling to the anchor tag won't work.
Adding this code to the css for the directive, and the anchor tag, will bring the anchor/link to the full height and width of the tile.
style="display:block;height:100%;width:100%;"
And any responsive changes that occur with the tiles will work with this code as well.
Related
In my mvc project, I have a cshtml file, wherein I have an anchor tag placed inside a footer element, which looks like this:
<footer class="login_footer">#Messages.msgCopyright | <a onclick="BeginSupportLoginMode();">Support Login</a></footer>
The problem here is that I am not able to click on the link when it is placed inside the footer element. The link was clickable when I tried putting it outside the footer element. I have tried finding solutions in several ways, but nothing has worked yet. Please suggest what should be done in this case.
The <a> is missing a href attribute. It is valid but it doesn't behave as a hyperlink (It is not tab-able or clickable). If it should be a clickable link, add a href="" attribute.
I have a div for the header, and then I have 4 divs nested inside of it for:
A Logo of the Brand
The Menu
Social Media Logo #1
Social Media Logo #2
Now I'm trying to link the logo to the homepage, and the social media logos to the corresponding profiles.
The problem is that the image doesn't show up. When I delete the the image link from HTML code and put it inside of CSS of that div it does show the image but it's still not clickable.
HTML:
<a href="">
<div id="fb">
<img src="face.png"/>
</div>
</a>
CSS:
#fb {
float:right;
width:90px;
height:90px;
margin:20px;
}
EDIT: Sorry if I did anything wrong. Im new here and Im learning to code.
EDIT #2: Formating
I'm unable to comment as I've rarely used this account, but the html you have above should work as is. What is currently being shown in your browser window?
For future reference, these types of posts are well received here. You've not included specifically what the problem is, or what you've tried to fix it, or even what is being shown. Not trying to be rude, just speaking from experience.
Look, we can make link on our page with this symbol # as I remember or we can just add name of our page.
If you want to make clickable only image we can make it in this way
<img src="pass to your image" />
If you want to create button with image we can add properties to element a, code is above, width and height to our element a and make the image in the center of our "button" in real it will be a e
lement.
Or we can create element button and put inside of him image. And style button with height and width. Here is code
<button onclick="location.href='link to another website'"><img src="pass to image" /></button>
If your image didn't visible. It can be mistake in your path to your image from html file, try to use ../ to return to previous folder. Use developer tools in Chrome. And in tab Console you will see your error why is it didn't show.
If you want to make a image that is also a link, wrap the image in an a tag this you can wrap in a div.
<div>
<img src="your_image_path" alt="alt_name">
</div>
I have made a button using which must include a picture and text. Here is an example of what I have at the moment
https://jsfiddle.net/9c9dnot9/
<button id="CLPButton" class="DeptButton">
<span>
<table style="width:120%">
<tr>
<th><img src="http://i.imgur.com/vjrbizL.png"></th>
<th>Clinical Lab <br> Platforms</th>
</tr>
</table>
</span>
</button>
The reason I have it set up as a table is to properly adjust the alignment and formatting of the image and text within the button.
I can wrap the image and the text in tags to href to the page I want to link to.... but then you have to click the picture or the text. I want the entire button to be clickable and redirect to the URL.
I have tried every tip and trick I could find on numerous forums but can't seem to get it to work. Things either outright fail or completely screw up the formatting.
The purpose of this is to have a series of buttons for a SharePoint site which link to certain corporate departments.
I am somewhat new at coding in general so the more explanation the better! Thank you
Buttons are not intended to be links. The purpose of a button is to interact with HTML forms (e.g. submitting form data).
If you want to have something that looks like a button and behaves like a link, then I would recommend creating a link and styling it with CSS to look like a button.
In your fiddle, you can actually just change your <button> markup to <a> and it should all work fine.
Updated Fiddle
You can wrap the entire button in an a tag and add the display: block property in order to set its height depending on its content. Then, instead of setting the width on the button, set it on the link and add width: 100% to the button instead, so your link won't take the full width of its container and your button will be more maintenable because you won't have to set the width of the link and the button if you decide to change !
Here is a working fiddle: https://jsfiddle.net/d5tcamok/2/
When I create a div with a link, and I toggle the editor, JCE removes the entire link code from the div.
This is the example:
<div id="test">text or image here</div>
When I toggle editor to see the result, and than back to the code view, this is the result:
<div id="test">text or image here </div>
So I don't understand why JCE removes the link outside of the div. I put there the link cause I would like the entire div with its background to be clickable.
If I save the article, when I'm in the code view, it saves the link! So it remove this only if I change to the visual way when I'm editing the article.
<div> is a block element and <a> is an inline element ahd before HTML5 putting a block inside of any inline element was not valid. This is why I suspect that JCE would wipe it out; in pre HTML5 this would be invalid markup. In HTML5 you can put a block element inside of <a> it, but I'm not sure if there is a setting in JCE to get it to validate with HTML5. You should probably ask on their forums. This link gives you some more detail.
I am not a HTML/CSS expert but I am in charge of developing and maintaining a website for my employer.
I have set of link in the middle of my webpage that I want to have a specific CSS applied to without affecting any of the other links, and really the only change I want to make is to move the title popup to the right. Basically, the pointing hand hover mouse icon blocks the text in the title, so I want to move the popup to the right of the pointer, so that it can be read completely during a hover.
I've seen a few different ways to manipulate the title popup but they are either way too complex for what I need, way too simple in that they affect all <a> tags on the page, or do not explain how to do what I want which is just move the popup to the right a little bit.
You can manually style any element of the page by using 'inline styling' which will not effect any of the other elements on the page.
You do this in the HTML rather than the Style sheet, for example say your style sheet has:
.tinybutton {margin:0;padding;0:}
Which would use the element in HTML as:
<a class="tinybutton" href="#"> </a>
Now let's pretend you want to move the button slightly right without editing the CSS you then use the inline styling like so:
<a class="tinybutton" style="margin-left:10px" href="#"> </a>
So in other words just add style=" " with the styling options you require to the element that you want to edit without effecting the CSS.
Now that you have answered your own question, I know that the titles you are trying to move are tool-tips generated by the browser.
Not only can those not be moved, these tooltips are browser dependent and looks different on each browser. I have no idea which one you are using but it is not Chrome because we made sure that the tooltip does not overlap the mouse cursor.
The other possibility, like the jQuery plugin you mentioned, is to write Javascript that renders each title in its own invisible HTML element. Then it makes those tooltips appear on by adding an a :hover style or mouse-event-handler.
Having done further research on this, I found several questions in StackExchange that indicate that a title cannot be modified. So given this:
<a title='stuff here' href='#'>Click me!</a>
it is not possible to manipulate the "stuff here" section using jscript, css, etc. The only option is to use a jQuery plugin or something along those lines, and that has proven to be beyond my ability to troubleshoot.
For the time being, I simply added spaces to the front of the title to push the text out, like this:
<a title=' stuff here' href='#'>Click me!</a>