I got the 1st part working of creating a div that contains clickable hyperlinks.
HTML:
<div id="input" contenteditable>
<div contentEditable="false">
Visit W3Schools - Visit W3Schools - Visit W3Schools
</div>
</div>
CSS:
#input {
-moz-appearance: textfield;
-webkit-appearance: textfield;
background-color: white;
background-color: -moz-field;
border: 1px solid darkgray;
box-shadow: 1px 1px 1px 0 lightgray inset;
font: -moz-field;
font: -webkit-small-control;
margin-top: 5px;
padding: 2px 3px;
width: 398px;
}
Per above code, i have a DIV that looks like an editable field containing 3 hyperlinks that user can click and navigate to corresponding pages.
And that part works fine.
Now what i want is, i want this DIV to be editable so that user can manually enter another hyperlink and click on a button and this new hyperlink will also be shown as a clickable item in the DIV along with the already existing 3.
Also user should be able to delete an already existing hyperlink.
How to do that?
JSFIDDLE https://jsfiddle.net/seadonk/vg4m5tso/
You can add new items using .append(). In my example i create a new link from the text in a textbox, and
$('selector').append(content);
You can delete items by selecting them and calling .remove(). Add a delete element next to the link, then add a click event handler:
$('.delete').click(function () {
$(this).prev('a').remove();
}
Related
I'm making a navigation system on some of the pages of my website that is roughly like this:
<span>Page</span>
Where each navigation link would look like that. I want the link representing current page
to have the following properties:
background-color: buttonface; border: 2px solid grey; border-radius: 5px;
and all navigation links to have these properties:
padding: 0 6px 0 6px;
In addition I wanted to make the border and background of the current page's link fade into any link on .mouseenter() and fade out on .mouseleave() unless it is the current page in which case it should not fade out. I am relatively new to jQuery and I have no idea how to do this.
It isn't completely necessary for the links to be in the format I put above as long as they're listed horizontally across the page and have the properties I specified. If it matters my site also uses the following code for style already:
body{font-family: 'Raleway'; background: #F07400; color: black; font-size: 18px; margin: 20px 0 20px 20px;}
button{font-size: 18px; font-family: 'Raleway'; border-radius: 5px; border: 2px solid grey;}
and
$(document).ready(function() {
widthval = $(window).width()-40;
$("body").css("width", widthval);
$("body").fadeOut(0);
$("body").fadeIn(1600);
$(window).resize(function(){
widthval = $(window).width()-40;
$("body").css("width", widthval);
});
});
You could layer two body layers, by placing a body2 positioned absolute as a child element of body, which would draw it ontop of body. Have the body 2 contain the border information and body contain the content. Then fade body2.
But this solution would require the content to exist in both body and body2 because clicks would be blocked to body and processed through body2.
updated
<div style="width:needed; height:needed;">
<div2 style="position:absolute; width:sameAsBody; height:sameasbody" class="fade">
this content will fade.
</div2>
content content here will be faded to. If changing just the background it would be literially the same hence it appears that the content did not fade.
</div>
$(document).ready(function(){
$(‘.fade’).fadeTo(2000, 1.0).fadeTo(4000, 0.0);
});
I have a question regarding an issue I am having with a pipe separator between links in a subnav bar. My links have a left-border of one pixel (the pipe separator) with the first link disabling the left-border. My issue is, when the links expand past their container and extend to a new line, the first link on the new line will have a border-left of one pixel. So, my question is, how do I disable the border-left if the link is the first element on a new line? Keep in mind that the number of links and the name of the links in my subnav changes depending on the page the user is currently on. So, "nth-child()" selector seems to be out of the question. I was thinking of using the JQuery .offset() method...but this doesn't seem to be the correct way of going about it. Any help or suggestions would be great.
Thanks you,
-Kyle
Here is an example:
Demo
<div class="container">
Link 1
Link 2
Link 3
Link 4
Link 5
Link 6
Link 7
Link 8
Link 9
Link 10
</div>
.container {
width: 300px;
}
.container a {
color: #999;
text-decoration: none;
margin: 10px 0 0 0;
padding: 0px 10px;
border-left: 1px solid;
float: left;
}
.container a:first-child {
border-left: none;
padding: 0 10px 0 0;
}
You could make every link have a left border (so just remove the code for the first link), move them 1px to the left with margin-left: -1px and cut the border off with overflow: hidden. See http://jsfiddle.net/3DU6d/
I am getting weird problem in using custom validator function in asp.net page and showing validation summary on the top of web page using CSS Styles.....
and this is the screen shot before clicking the button submit changes
after submitting the page the validation summary is displayed on top but controls positon is changing like this
and this is my code for
<div id="validationSummaryHolder" class="validationSummaryHolder">
<asp:ValidationSummary runat="server" ID="valsErrors" ValidationGroup="TestValidation" DisplayMode="BulletList"
CssClass="validationsummary" HeaderText="<div class='validationheader'>Please correct the following:</div>" />
</div>
and this is my css styles for validation summary
Css Styles for validation summary
.validationheader
{
background-color: white;
color:green;
height: 14px;
font-weight: bold;
border-bottom: 1px solid #b08b34;
padding-top: 3px;
}
.validationsummary
{
border: 1px solid #b08b34;
padding: 0px 0px 0px 0px;
margin:5px 0 20px 0px;
font-size:12px;
width:99%;
}
.validationsummary ul
{
padding-top: 1px;
font-size: 12px;
color:#982b12;
}
.validationsummary ul li
{
padding: 1px 0px 0px 1px;
}
I have placed all controls in individual divs and mentioned type of positon for all controls is Relative ..
I don't know why I am getting this weird thing,
Do i need to set fixed height and width for total page ?
would any one pls help on this
Many thanks In advance....
Check the width of
<div id="validationSummaryHolder" class="validationSummaryHolder">
It is not likely the the validation summary's insides are causing anything of their own accord since they are contained in that div, but maybe the containing div is stretching or shrinking the page. Also some html in the question would help. If you can't paraphrase the html here, another option would be to show the wire frame of the page with and without the validation summary and the answer should be clear at that point what is happening.
I've a grid of photos. What I need is the user to be able to click on the photos of people they want to invite to an event. Upon first click I'd like it to alter the CSS/styling (for example add a border or change transparency) then on second click revert back to original style. So toggle I guess.
So that a user can click say three images and those three would have a green border showing they've been selected. Then if he'd like to deselect he simply click again and it reverts back to the original style.
How is this possible? CSS? Javascript? JQuery?
So far all I've got is the table of photos:
HTML
<div class="user">john</div>
<div class="user">doe</div>
<div class="user">larry</div>
<div class="user">sergey</div>
CSS
.user {border: 1px solid #ededed; cursor: pointer; width: 100px; padding: 10px; margin-bottom: 10px}
.active {border: 1px solid #0066cc; background: #eeeeee;}
jQuery
$('.user').on('click', function() {
$(this).toggleClass('active');
});
Fiddle - http://jsfiddle.net/qgGne/
Bit of a newbie question here.
I have a form and one of it's fields is for a file upload. Instead of having the boring old usual text input box with a 'choose file' button beside it, I'd like to have an image which when you click opens the dialog box to browse for the photo.
The way I was hoping to be able to do this was with two forms. IE when the user clicks the image a modal box appears with form upload input in it. User chooses file and clicks submit the user is returned to the form.
That doesn't seem to work because having a form inside a form must be bad practice i suppose :) Is there a way to do it like this?
The alternative is that I can somehow replace the usual text input box with the 'choose file' button with my own graphic but despite google I ain't found out how to do that.
Any ideas
Very simple solution - simply put a label tag for your input
<label for="uploadFile">
<div id="image"></div>
</label>
<input type="file" id="uploadFile" style="display:none" />
And the just add a background-image property to the #image div :)
Because of the heap of security issues around how file inputs work, they're pretty hard to fix. What does work, however, is a scheme like this:
Design your own look for a file input that's fairly close to the default one in size and shape
Position your file input and a real file input at the same place in your form, with the real one on top of yours
Make the real input be transparent (that is, set the opacity to zero)
Now clicks on your elements styled the way you want them to look will actually be interpreted by the browser as clicks on the file input. You have to tweak things somewhat for IE, because IE7 allows the user to type directly into the input while other browsers all immediately launch the file chooser when the element is clicked anywhere.
edit — here is a jsfiddle that works in Chrome at least. The HTML:
<div class='fancy-file'>
<div class='fancy-file-name'> </div>
<button class='fancy-file-button'>Browse...</button>
<div class='input-container'>
<input type='file'>
</div>
</div>
That wraps the "fake" file input that I'll style with my own CSS, as well as the real <input> element. Here's the CSS:
div.fancy-file {
position: relative;
overflow: hidden;
cursor: pointer;
}
div.fancy-file-name {
float: left;
border-radius: 3px;
background-color: #aaa;
box-shadow:
inset 1px 1px 3px #eee,
inset -1px -1px 3px #888,
1px 1px 3px #222;
font-weight: bold;
font-family: Courier New, fixed;
width: 155px;
font-size: 12px;
padding: 1px 4px;
}
button.fancy-file-button {
float: left;
border-radius: 3px;
border: 1px solid red;
background-color: #F5BD07;
font-weight: bold;
vertical-align: top;
margin: 0 0 0 3px;
}
div.input-container {
position: absolute;
top: 0; left: 0;
}
div.input-container input {
opacity: 0;
}
The outer container is made "position: relative" to make it easy to position the real <input> over the fake stuff. The fake stuff has my made-up fancy styles, and it's sized so that it's just about the same as the overall size of a real file input. The real one is absolutely positioned and transparent.
Here's some jQuery to drive it:
$('div.fancy-file input:file').bind('change blur', function() {
var $inp = $(this), fn;
fn = $inp.val();
if (/fakepath/.test(fn))
fn = fn.replace(/^.*\\/, '');
$inp.closest('.fancy-file').find('.fancy-file-name').text(fn);
});
Browsers won't give you the complete pathname, but they'll give you a part of it. Some browsers (Chrome and IE) give you an obviously-fake path prefix, so the code strips that out (because it's useless).
File upload fields are quite limited. See: http://www.quirksmode.org/dom/inputfile.html