The page I'm developing is this: http://www.thespeaker.ca/
I have a search box in the drop-down menu link (I'm using a drop down after using a lot of other menu styles -- I know the drop down is kind of ugly and quite "beta" but it is light code-wise).
I've tried doing what I use for the clickable "S" button at the left, which is wrapping the image in this span:
<span data-href="http://www.thespeaker.ca/" onclick="document.location.href = this.getAttribute('data-href'); return false;">
But it doesn't seem to work for the search box.
Any other ideas I could try?
If you want to stop the top accordion menu from opening when clicked on the search box, add a onclick="return false" to the input element.
<input value="" name="s" id="s" placeholder="Search" type="text" onclick="return false">
It blocks the onclick event to be sent to parent accordion within the search box.
Related
There is an input tag which gets some text and a button to submit the information. I want to make sure the user clicks button. This is not related to validating the input. Just want to make sure that if the user is viewing this page and has entered text then he must click the button before moving onto the next page.
<input type="text" class="form-control ng-pristine ng-valid ng-touched" placeholder="Search for a domain" name="page1.domainSearch" [(ngModel)]="searchValue" (ngModelChange)="func()" />
<button type="submit" class="search" (click)="func()" [disabled]="!searchValue"></button>
I know i can add a boolean variable to this component and then pass the value of this variable to the component having the button to progress to next page as an input. But is there any way to make sure of this in the same component?
I've started developing a small app using Ionic 1.
Here I've used ionic-datepicker external plugin as the date picker for my app.
I need to put the button inside of a label in the same row of an input field
<label class="item item-input">
<input type="text" ng-model="newEvent.date" placeholder="{{date}}">
<button class="button button-full button-positive" ng-click="openDatePicker()">
Date
</button>
</label>
I need to place the elements like this. But here, the function doesn't call. But when I place the same button outside the label tag it works.
Why is that? How can I make it happen?
The label element intercepts the click event and focus the related input. I suggest to you wrap label and button inside a div element.
I am styling a form with an input field. The input field is required to be completely transparent. The input field itself is no problem but once I start typing, the browser opens up the dropdown with the saved form data, displaying the words I previously entered in input fields. The dropdown itself is not transparent but is white. When I hover over one of the saved words it appears in the input field and when it does, the input field is also given the white background.
I tried setting the background for the active, focus and hover state to transparent but that doesn't seem to do the trick. I am also not able to see the saved form data dropdown in the element inspector so I don't know how to target it.
HTML:
<form class="" action="" method="_GET" accept-charset="utf-8" role="]">
<div class="form-group">
<label class="sr-only" for="q">Search Input Field</label>
<input class="form-control" type="text" name="q" value="" placeholder="SEARCH">
</div>
<button type="submit" class="btn btn-default btn-red">SEARCH</button>
</form>
Here's a fiddle:
http://jsfiddle.net/dtxeofnL/
Click into the input field and type a letter. If you have previously entered something in the input field (or another input field in your browser), the dropdown will appear. When you hover over one of the words in the dropdown, it'll appear in the input field and give it an opaque, white background.
Can this be done?
Autocomplete is browser and operating system specific. There doesn't appear to be any way to style the browser's own internal autocomplete function.
I would suggest disabling browser autocomplete altogether:
<input autocomplete="off">
Then utilizing JqueryUI's Autocomplete function, http://jqueryui.com/autocomplete/, which can be styled any which way you'd like.
I want to create a menu button for my responsive design.
I want to display the menu when the user has clicked on the button, and hide it when he has clicked back.
My Html code is the following:
<!-- Invisible checkbox -->
<input type="checkbox" class="menu_hidden_checkbox" id="show_menu" role="button" />
<!-- Menu button -->
<label for="show_menu" class="btn btn-navbar"><i class="icon-align-justify"></i></label>
The associated CSS code I use is:
.menu_hidden_checkbox{border:0;clip:rect(0 0 0 0);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;} */
.menu_hidden_checkbox:checked +.left-menu{display:block;}
The above code isn't working at all. When the checkbox is checked, nothing happens.
Did I make something wrong?
JSFiddle: http://jsfiddle.net/P8DJZ/ (Expand the row to see full screen/smartphone mode)
Here is the solution:
Put your switch button everywhere you want to:
<label for="show_hide">Click here to hide/show the div</label>
Put this code just before the div you want to show/hide:
<input type="checkbox" class="hidden_checkbox" id="show_hide" />
For example, if you want to hide this div, just do something like that:
<input type="checkbox" class="hidden_checkbox" id="show_hide" />
<div class="hidden_div">
Your hidden content will be there.
</div>
Then in your CSS file, add the following code:
.hidden_checkbox{border:0;clip:rect(0 0 0 0);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;}
.hidden_div{display:none;}
.hidden_checkbox:checked + .hidden_div{display:block;}
The first line will hide the checkbox so the user will only be able to use your switch button and not directly the checkbox. The second line will hide your div.
The third and last line is a condition that will change your div display to block when and only when the hidden_checkbox is checked.
Basically, when the user will click on the switch button, the hidden checkbox will be checked and the hidden_div will appear. If he clicks once more on the button, the hidden_div should disapear.
I hope this could help someone.
I am encountering a weird problem with buttons in a page.
I have three buttons as action buttons, but the third button click event is never called.
Basically the functionality of 3 buttons are "Prev", "Next", "Exit". initially "Prev" button is disabled. Now both "next" and "Exit" buttons are enabled. The click event on the "Next" is working but the click event on "Exit" is not working. When i hover my mouse the hover function also does not work on this button.
But when i click "Next" now it automatically starts working. I have no idea what is going on.
Here is the code for buttons
<div id="controls">
<input type="button" id="prev" name="prev" value="Prev" disabled="" />
<input type="button" id="next" name="next" value="Next" />
<input type="button" id="exit" name="exit" value="Exit" />
</div>
The binding for these buttons are as follows -
$('#next').bind('click', next);
$('#prev').bind('click', prev);
$('#exit').bind('click', exit);
I have tried to replace the button with another button, tried a different javascript function but nothing works.
Also if i interchange "next" and "Exit" buttons, now "Exit" will work and "next" will not work. This is really getting annoying. I have tried all sort of debugging but no luck
any help is appreciated.
Thanks.