Sorry for this, but I was trying to edit my code for my website, what i was editing was the drop down menu, when i would hover over the link itself the dropdown menu would appear, but when i hovered my cursor over the dropdown menu, the drop down menu would just disappear, i have asked this question before and thankfully someone fixed, i would really appreciate if someone could help me fix the drop down menu, I also have a problem with moving the "======" header to the very top of the website, for some reason it is unable to go to the very top, but essentially can someone please help me fix the drop down menu, Thank You!
ps. I know that this isnt the correct way to implement my code to this website but im not entirely sure how and im looking to bypass this dropdown menu problem quickly, thanks again!
Source code:
http://pastebin.com/Yuxmi9g9
CSS:
http://pastebin.com/QrpJr68C
I wrote your code on https://jsfiddle.net/ssucugx1/
It will be good to show your example more clearly. Your problem can not be solved just with css, or unless you can do that(i.e removes margin between button), it's not a good way.
This problem can be solved easily, if you use javascript, especially jQuery. And I think you are new to web programming(just my guess), using Bootstrap is good answer to you.
Bootstrap Getting Started
Go to the site, and copy and paste CDN code in your <head> and put these code in your project. And your body,
<div class="dropdown">
<button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn btn-default">Dropdown trigger <span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dLabel">
<li>Eat Healthy
</li>
<li>Workout
</li>
<li>Advice
</li>
</ul>
</div>
<script>
$('.dropdown-toggle').dropdown();
</script>
That's all. Here is example fiddle. https://jsfiddle.net/oh3ck3Lr/
Related
I am working with Semantic UI in a rails project and wanted to create a dropdown menu with items that would link to other view pages. Most of the problems i've seen with the dropdown stemmed from users not initializing the dropdown menu which I was able to do.
Here's my code:
<div class="ui floating dropdown button">
Course<i class="dropdown icon"></i>
<div class="menu">
<% #topics.each { |topic| %>
<a class="item" href="articles/<%= topic.id %>">
<span class="text"> <%= topic.name %></span>
</a>
<% } %>
</div>
</div>
Different things i've tried:
Creating a separate hardcoded links / a tags like <a href="articles/4"> outside of the dropdown menu. This creates a working link and directs me to the article show view page with the id of 4.
Changed the wrapping 's class as "ui floating dropdown item" as well
I've also looked up other users' posts that shows they have the same exact problem. But when i try their solution, my dropdown menu items still do not work and i'm not sure what i'm doing wrong. Here are their posts:
https://github.com/Semantic-Org/Semantic-UI/issues/3234
https://github.com/Semantic-Org/Semantic-UI/issues/453
The two most important things seem to be:
Not putting the dropdown class definition as part of an anchor tag (inserting an anchor tag inside an anchor tag in the dropdown menu)
Not surrounding each anchor tags with their own <div class="items"> tags but to integrate them into one line like <a class="item" href="#"> # </a>
Can anyone help me understand what i might be overlooking? Let me know if i left out any critical information, would love to update the post with the relevant data right away, thank you!
After doing more and more research, I came to the conclusion that the links were not working in my semantic-ui dropdown menu because of some code, most likely Javascript, that i had inserted before.
Of course, i ruled this way out of the realm of possibility because there was no way i would forget about such code but i decided to go through all of my .js files just in case.
Lo and behold, i had a jQuery selector return false when a .item was being clicked...
I felt really silly and i didnt want to believe it at first but if you're having this problem and you've checked everything else like i have, it's probably your javascript!
im new to HTML and im just trying to edit a template at the moment. A Sign Up button on an unordered list has thrown me.
Heres some info:
On the template i had to change the link to a form button in order to integrate it opening up a part of the account system... After i placed the form button there it turned out like this:
https://gyazo.com/82c807d59162ada63dcaeea69b2fd340
The old code looked like this:
<li>Sign Up Now!</li>
And the new code looks like this:
<li><button type="button" class="order-button" data-product="1" >Sign Up Now!</a></li>
I also had to insert this into the footer in the code to integrate it:
<script type="text/javascript" src="#"></script>
I've taken the links out just for anonymity.
Also the bottom part of the list where it now says "Sign Up Now!" is supposed to be green and then turn to black on the mouseover.
The CSS files from the template are quite extensive though and the section with all of the .btn CSS parts is just a long unstructured list thats hard to make sense of. And on top of that i cant work out how to link the form button to the .btn part of the CSS.
Thanks in advance for any help :)
Your markup has an incorrect closing tag for <button>. It should be:
<li><button type="button" class="order-button" data-product="1" >Sign Up Now!</button></li>
One alternative is to add your custom css at the end of the CSS file.
Thay way you could add this class:
.order-button{
/* Styles for button here */
}
.order-button:hover{
/* Styles for mouseover here */
}
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/
I have built a site that I am trying to make responsive...with Bootstrap CSS it is actually fairly easy - but I am running into a weird problem. Everything works fine...except when I visit one page (the "Settings" page), when I'm holding my iPhone upright...the links stop working in the navbar (I try to click on them but nothing happens). However, if I turn my iPhone, and hold it horizontally, the navbar links start working again. Has anyone ever seen this problem? Here is relevant code:
navbar.html (I am using angular, and it doesn't make sense for the nav buttons to function on one page...and not on another):
<div class="header" ng-controller="NavbarCtrl">
<h2 id="redbox" class="text-muted">[H]</h2><h3 class="text-muted">ackabox</h3>
<ul class="nav nav-pills pull-right">
<li ng-repeat="item in menu" ng-class="{active: isActive(item.link)}">
<a ng-href="{{item.link}}">{{item.title}}</a>
</li>
<li ng-hide="currentUser" ng-class="{active: isActive('/login')}">Login</li>
<li ng-show="currentUser" ng-class="{active: isActive('/settings')}">Settings</li>
<li ng-hide="currentUser" ng-class="{active: isActive('/signup')}">Sign up</li>
<li ng-show="currentUser" ng-class="{active: isActive('/logout')}">Logout</li>
</ul>
</div>
I don't really know what else to include for code...it just seems like a glitch with responsive web design that might have some weird solution I don't know about. Any help would be greatly appreciated.
UPDATE
I posted the site to git: https://github.com/eamonwhiter73/hackabox
Node modules are included...you just have to run MongoDB instance...and then cd to the site directory in your console...and type grunt serve. That will load the site automatically into the browser on localhost:9000.
Also, for MongoDB to function - mind this line in lib/config/env/development.js:
...
uri: 'mongodb://localhost/hackabox'
...
You may have to change this depending on how you have MongoDB set up on your computer (I am on a Mac, but I know that for Windows, it might be a slightly different syntax - or you may be using a username and password...just google it).
Have at it (and check out the cool forum that I built into the site)!
Found the real culprit - oddly enough - it was just a float:left in the css for .header > h2 and .header > h3 - when I removed that it fixed everything - need to figure out a different way to reformat my header though :)
So I have 4 different room transitions (up, down, left & right). I want to be able to set each transition to go to a specific page, and repeat if the same transition is clicked again.
For example, have "left" (data-animation 55) goto "Page1.html", and if I was already on "Page1.html", then it would just transition right back into the page. And I would have the "right" button, go to "Page2.html", etc.
https://github.com/cweigen/page_transition_room
There's the github repo, but this is the code that I've been messing with, experimenting with different versions of it to attempt going to a specific page and repeating if the same button is clicked, but go to another specific page is another menu button is clicked.
<div class="pt-triggers">
<div id="dl-menu" >
<ul class="dl-menu">
<li data-animation="54"><a href="#" > right </a></li>
<div class="pt-triggers1">
<li data-animation="55"><a href="#" > left</a></li>
<div class="pt-triggers2">
<li data-animation="56"><a href="#" > down</a></li>
<div class="pt-triggers3">
<li data-animation="57"><a href="#" > up</a></li></div>
</ul>
</div>
</div>
<div id="pt-main" class="pt-perspective">
<div class="pt-page pt-page-1"><iframe src="http://visiondigit.al/VisionDigital_Launch/" width="100%" height="100%"> </iframe></div>
<div class="pt-page pt-page-2"><iframe src="http://scsuchat.com" width="100%" height="100%"> </iframe></div>
</div>
You can't expect others to download the repo and build it for you. Time matters! That's the first thing you need to learn how to ask a question properly on StackOverflow.
As you are a new user, I'm going to make one-off excuse for you.
The library you are using is not the best choice for your task. However, it does provide as many as 67 different transition effects, which are defined in **pagetransions.js** and called using data-animation attribute. Have a look at the js file and you can choose the specific animation you are looking for.
To solve your other problem, you'll have to write a bit of your own code as the author doesn't provide a function to link each button with specific page, nor hiding the button when you are already on that page. You can use jQuery to do so.
But like I said, this is not the best nor the only option you have.
Check
THIS DEMO
I have created a structure that mostly mimics your requirements. Have a play and try to understand the demo. The structure is quite simple. It uses two external resources which you can see and download from the fiddle.