I am attempting to alter the hover functionality of a KendoUI button. The HTML looks like the following:
<div class="div-vertical-delimitor div-float-left"></div>
<a id="a-draw-point" class="k-button single" title="Point">
<img id="img-draw-point" src="../Images/DT_DrawPoint.png">
</a>
</div>
The issue is, I'm not seeing a k-state-hover class being activated when I hover over the button. However, the button does change when hovering over it.
When hovering over other objects on the page such as toptab links I see the k-state-hover being applied when mousing on top of the link.
Any help would be appreciated. I'm new to CSS and KendoUI.
Related
Was wondering why when I clicked my button in html it wasn't responding later found out that it will only respond and redirect when I clicked the wording inside "Get Started" was wondering why. This is the code I'm using
<div class="main">
<div class="main__container">
<div class="main__content">
<h1>RAID 2 EARN</h1>
<h2>TECHNOLOGY</h2>
<p>We make it easy!</p>
<button class="main__btn">Get Started</button>
</div>
<div class="imgmain">
<img id="main__img" src="/IMGS/picture1.svg"/>
</div>
</div>
</div>
It is because you're actually clicking the anchor tag inside of the button and the button click doesn't have any actions associated with it. The size of the hyperlink is always only the size of its content. You should change your CSS to style your hyperlink to look like a button. Typically, you can do something like this:
<a class="main__btn" href="raid2earn.html">Get Started</a>
This way you're HTML spec compliant and your hyperlink is styled to look like a button but you're using default browser patterns to complete your action.
Your anchor tag is enclosing only the 'Get Started' text instead of the button. This way, only the text becomes a link
Actually, every html element has a job.
<a> for connecting to outer files
<button> for the inside actions
And you can style everyone as you want.
But:
if you still need to use the button and put the a inside and need to be able to click the button and do the action of the a, there are many many ways, some in html, some in css, and others in javascript.
In html, the easiest solution to your issue is to flip the elements, and make the a outside the button like that:
<a href="#">
<button>Click the button now</button>
</a>
This one is just the easiest.
And there are many others in html and css and javascript.
But again, you must use every element in its own purpose.
Sure you are putting a link tag inside a button because you want a button look and feel. just style your a element the way you want your button to look like as suggested above.
Cheers
I making a webpage. The problem is I am really bad at HTML. I need to make a button that opens up the contact like on a new page I don't know how to explain really.
Right now if I click contact it leaves it on the same page with other stuff not cleared.
How would I do that?
[EDIT]
I misunderstood. I would try showing the element in a modal. This is simple with something like Fancybox, if you're new to coding.
https://fancyapps.com/fancybox/3/
Example of how to load an element in a modal: https://fancyapps.com/fancybox/3/docs/#inline
To hide your contact div until it's clicked:
<div style="display: none;" id="contact">Your content...</div>
[ORIGINAL]
Have you tried adding a target="_blank" attribute to your HTML?
Eg:
Contact
I got a link to an orderform in my data-title image description. Unfortunatedly when it opens the page keeps the lightbox2 shadow overlay on top. The layer disapears if I click somewhere. Is there a way to breakout direct without clicking?
<a class="tile-inner" data-title="Text <a href='index.html#orderform' style='color:#EB590E;font-style:italic;font-weight:bold;'>Order now!</a>" data-lightbox="gallery" href="img/big/7.jpg">
Finaly I ended up with adding onclick='parent.window.location.reload();' and some variables (for the orderform preselect) to the link.
I have two links on my page and the views are changing according to it. The default view is the iPhone view and the other one is the tablet view. The link for the iPhone has the below CSS
.current-device{
border: 1px solid #999;
}
and it appears like,
The HTML code is,
<p>Mobile App</p>
<a class="mobile-icon current-device" href ng-click="tabletView=false"></a>
<a class="tablet-icon" href ng-click="tabletView=true" ></a>
<div class="mobile-preview" ng-class="tabletView ? 'tabletView' : '!tabletView'" >
<div class="mobile-wrapper" >
<div class="mobile-simulator" overflow="scroll">
<me-iphone ng-show="!tabletView" tmp-url="{{appTemplateUrl}}"></me-iphone>
<me-tablet ng-show="tabletView" tmp-url="{{appTemplateUrl}}" ></me-tablet>
</div>
</div>
</div>
I want to give the same styling for the tablet link when it is clicked and remove the styling from the iPhone link, likewise change the style of the clicked link, but the default link style should be as it is when loading and should change when the user clicked the other link. I tried doing it but I could only do for hover over, the default style for the link does not appear in that way.
You can use ng-class to achieve this.
<a class="mobile-icon" href ng-click="tabletView=false" ng-class="{'current-device': !tabletView}"></a>
<a class="tablet-icon" href ng-click="tabletView=true" ng-class="{'current-device': tabletView}"></a>
I basically want an image as a button, for example, see the 'recent inbox messages' thing at the top next to stack Exchange? I want to recreate that moreorless but with my own image.. How would I go about doing this, I've tried:
<button type="button" name="test">
<img src="C:/Trey/rs-logo.jpeg">
</form>
but that didn't work, could anyone help (sorry if I worded all of this badly, English [though my native language] isn't a strong point!
-Trey
You can make an image button with something like this:
<a href="#">
<img src="yourImage.png">
</a>
This creates an image element with an anchor surrounding it, so for all intents and purposes, it's an "image button." You will have to style it to your liking.
UPDATE
Your code will also work if you change it to
<button>
<img src="yourImage.png">
</button>
You have to close the button tag. This will create an ugly-looking button with an image in it, but you can use CSS to style it to your liking.
you are opening a button and closing a form which is not even opend yet
you should use in first place. how ever using an image as a button is not the best idea i guess
<button type="button" name="test">
<img src="C:/Trey/rs-logo.jpeg"/>
</button>
made you a quick fiddle to check it out: http://jsfiddle.net/T2JRt/1/