The following zip contains the website html and required files: http://dl.getdropbox.com/u/4281191/login.zip
When you hover the html (html:hover) you see a animation that transforms the container into a loginbox, I want that to happen when I click on "Login" at the "Hello, Guest" menu instead.
Anyway to get this done? I'm new to js...
Additional info:
the css is inside the html,
and the css3 animation gets triggered by:
html:hover id/class {
property: value;
}
Thanks for any help!
And I can't vote at comments since I don't have enough reputation...but I could do some free design work for the person who helps me ^^
I still don't know much about animations, but for what matters here, you could use something like the .classname:active or .classname:focus selectors. But as soon as you click something inside it (e.g. a text box), the style will disappear.
So, for this, it really depends. Do you just want a menu that has links that take the user to another page (for this case, you'll be fine) or do you want a login form (for this case, forget it, use jquery)?
For today and future reference, save this link because it'll be your best friend:
http://www.w3.org/TR/selectors/#selectors
Update
Yes, I hovered but I didn't look at the code. I looked now and, unfortunately, the answer is no. You can't affect some upper level object like that using CSS.
For that use jQuery. The simpler way would be use jQuery to add a class to the element you want to change (like $("#the-object-id").addClass('class-name')). To keep the effect add the duration argument. Read this page about Adding a class using jQuery.
Related
For those, who failed to spot it before, hoisted here:
NO JS frameworks please. Even little ones.
And let me add: no libraries as well, for those who want to propose jQuery saying it's a library, not a framework. :P
I have list items with icons, via:
li:after {
content: " : " url(ncheck.png) url(ntrash.png);
}
Question: upon clicking the icons I want to run JS code (different for trash and check). How to do so with pure CSS / native JS?
Intent: I'm wondering whether content inserted via ::after can be made actionable.
I'm working on making this happen via img tags (image button technique), however wanted to know, whether I missed something, and whether this can be done using CSS ::after.
PS. Browser support: FF is a must, Chrome is a nicety.
Updated - why that content should NOT be actionable
In the end I decided against using ::after for actionable content. Reasons:
CSS for actionable content is meh
Content added with ::after is added AFTER element, but before next element. So, adding span and making span actionable requires further tweaking and arm-twisting in order to move the span from it's actual position. Too weird, too hacky to really be worthwhile.
There's absolutely lovely piece of why neither DIVs nor SPANs are BUTTONs.
So, I went with adding input type="image" instead.
Thanks to TJCrowder and Harry for their time and help here.
You cannot detect clicks on pseudo-elements at all.
So if you wanted to have the user seem to be clicking the pseudo-elements, you'd have to be detecting clicks on whatever's underneath them instead. Depending on your structure, that mean adding elements and so negating the benefit of the pseudo-elements, but it depends on your reasons for using pseudo-elements in the first place.
It could be that your structure already has something there for you to detect clicks on. If so, you could then figure out which "button" was clicked by comparing the click's coordinates with those of the element they're attached to. But again, it depends on your structure.
I have an editable div. The content of that div looks e.g. like that:
This is a <ins>new</ins> chapter.
(The tags are not visible, they are for styling)
If you set the text cursor in front of the "new" everything is fine. But if you set the text cursor behind the "new", the cursor is inside the < ins >-tag and new typed text is also inside the tag:
This is a <ins>new and very interesting</ins> chapter.
But it should look like that:
This is a <ins>new</ins> and very interesting chapter.
How can I set the text cursor behind the tag and prevent that new text is written inside the tag?
OK. The first idea was to made the
<ins contenteditable="false">new</ins>
Inside the contenteditable="true" element. Further reading (contenteditable=false inside contenteditable=true block is still editable in IE8) tells that this is not as always interpreted good in IE. In this post there is a hack answer (https://stackoverflow.com/a/7522910/1125465) but I really do not agree. It is just a mistake which will probably be repaired in the next versions of browsers.
Next I followed this link (HTML contenteditable with non-editable islands) and I haven;t got good news. There is no way of blocking the ins tag from editing so simple. First of all a little note:
If this isn't an additional functionality You must be sure it works as it should. As You wrote The user isn't allowed to write inside the -tag, so all the options:
working in almost every browser...
working with a little bug...
working but if someone...
must be rejected. So if someone turns the javascript off, it should work too. In that case I've come to the first conclusion (as always): server side verification MUST BE DONE.
This will prevent the user from destroying Your database and doing things he can't.
After server side verifying (and showing notification if something is wrong of course) it is going to be additional functionality. So we should do all we can now, to make it work (but now there is no obligation).
NICE LECTURE :)
https://stackoverflow.com/a/7232871/1125465
http://jsfiddle.net/X6Ab8/
**SOLUTION **
I propose something like... I know this sounds a little bit more like old days with milion tags, but really this will work and will be great.
Make an additional span element between the ins elements (for example using php:
$text = '<span contenteditable="true">'.$text.'</span>';
str_replace('<ins>', '</span><ins>', $text);
str_replace('</ins>', '</ins><span contenteditable="true">', $text);
Make this span editable, and only this span editable (not the block container). That's all. Solution is simple, clean, much more efficient and almost 100% safe. And nice...
ADDITIONAL SAFETY when using javascript hacks
If You need it to be done fully with javascript (maybe someone has idea how?), for total safety I would propose additionaly something like this:
Add data-noneditable-id="id" to each non editable element inside the main block editable container. Now every non editable element has it own unique id (can be done using jQuery for example using selector $("div#editable ins")).
Run a javascript that will run through all the objects that has attribute "data-noneditable-id" and save their innerHTML in array (for example: 1 => 'new', 2=> 'added', 3=> 'inserted', ...).
Now if someone edit any of them, You can easily repair them.
PS. This should also help a little... (https://stackoverflow.com/a/4979828/1125465).
Hope it helps! Best regards.
Is there a way to change the defalt behaviour of TimyMCE, so that when you insert a link, it renders something like this:
<span onclick="window.open('http://google.com', '_blank', 'location=yes');"></span>
instead of
Ideally, I would like this to be done by the Link button, but it could be done onSubmit.
ADDED:
The reason for doing this (as I know it seems like bad practice) is to be able to port to PhoneGap (using the InAppBrowser plugin), as is not intended for browser use.
Overlooking that this really isn't a good practice, I will assume you have a valid use case for wanting to do such black magic.
But before, a few things to consider:
I would advise you to keep links as links while working in TinyMCE. That way, your users will be able to insert and edit them as usual. Changing them to span elements inside the editor will practically eliminate the ability to edit them without editing the full source. You should probably convert them to span elements outside the editor.
If you're the stubborn type and don't care about #1 or your users, you should note that the default TinyMCE 4 configuration doesn't allow onclick attributes, so you'll need to update extended_valid_elements, otherwise they will be removed during the cleanup process.
There is probably a better way to do what you're trying to do. As #Vic suggested, an event listener would probably be a better option.
Nevertheless, I will humor you. Below is an overview of the process with a working example.
Overview
If you are developing with TinyMCE 3.x, you'll want to tap into the onSaveContent event. If you are using 4.x, use the saveContent event. In both cases, the concept is the same.
This event gets fired whenever the content of the editor is "saved". This happens automatically if TinyMCE is submitted as part of a form, but you can also use tinymce.triggerSave() to force it on all editors at once.
So, simply setup your callback function to replace all links with the evil span alternative. You can use pure JS or TinyMCE's built-in DOM utilities (probably only a good idea if you're already familiar with them), but for clarity (and sanity) it's much easier with jQuery.
Working Example
TinyMCE Fiddle: http://fiddle.tinymce.com/mAdaab/1
This example uses TinyMCE 4
Open your browser's console to see the output
After TinyMCE loads, press the Save button
The resulting HTML will appear in your console
Do with it what you wish, but remember that there probably is a better way.
What you are proposing is a really bad practice (as in not using anchor tags for links) wouldnt it be easier to actually give your link an id or class and attach event listener with javascript and on click prevent default behavour grab the href attribute and use your window.open?
I want to put this nav bar on my website, here is the demonstration page: http://insicdesigns.com/demo/css3/exp1/index.html
it uses JavaScript, jQuery, and CSS
The problem is, on my site I use PHP and a index.php?page=home, ?index.php?page=contact, etc.
And I can't figure out how to set an item on the bar as "active" [it defaults to "Home"]. I looked into the code, and I found out that the first <li> [the Home] has class="active". I tried simply moving the class to the second item, ["About"] but that just screws everything up, by moving the whole animation to the right which does not work as it is meant to. So on the .click(), this is how it sets an item active:
$(this).siblings('li').removeClass('active'); // removes active
$(this).addClass('active');
So I put id="target" on another item, and with Chrome's JS Console I type in the same code, except I use "#target" instead of "this"
But nothing immediately changes. I have to hover over the bar, for the animation to start, look for the active item, and move the animation over there. Right now, if I use this to replace my current nav bar [which is here], and if someone goes to index.php?page=contact I can't make the About link active so that the user knows they're on the About page!
So here is my question:
Is there a way to tell jQuery I just hovered, from some code? [fool it]
something like:
$("#target").fakeEvent("hover");
So that it runs the code [which, btw, is attached to a function(){} inside a $(selector).hover() -- look at the lavalamp.js file on the example]? If you can help, I'd really appreciate it! Thanks :)
Well, hover consist of two events, mouseenter and mouseleave.
You can trigger the mouseenter event with:
$("#target").mouseenter();
Answer: http://jsfiddle.net/morrison/4CU4H/
Notes on answer:
The fancy menu uses poor JavaScript. I have adapted the script to fix some bugs as well as optimize performance. Use my JavaScript instead of theirs.
To get the active class in the correct position on page-load, simply apply the active class where you would like before jQuery is called. You should probably set the active class in your php output. This also allows for nice style degradation when JavaScript won't load.
The plug-in disables clicking because it's an example. You'll probably want to remove the return statement in the click function.
Notes on your website:
Hide your queries. This isn't a hard rule, but in your case you should. http://www.macdonaldfamilysingers.com/?page=contactindex.php?page=contact should be http://www.macdonaldfamilysingers.com/contact/. Here's a tutorial on url rewriting.
You'll probably want to beautify your tables. By removing some of the borders and spacing, it'll also take up less visual space.
I am building custom buttons(sliding doors) for a new website. The buttons will not trigger a link but a javascript that then submits the form.
My solution is to use div (instead of link) with span within.
The question is if I should use onmouseover/onmouseout or is hover a preferred?
Pleas note : My website demands javascript else it wont work at all, so there is no problem to use javascript for the button, the question is which way that is the most correct?
I would do it with CSS because it would require less code and it would work with Javascript disabled
If you are talking about jQuery events, it doesn't matter, it's the same.
If you're talking about HTML onmouseover/onmouseout vs. CSS:hover, go for CSS:hover.
It's far easier to maintain, looks cleaner and decreases the size of your HTML which is a mess most times, anyways.
The solution for this is to simple use onmouseover/onmouseout on the div element. It will generate some code but it will be safe to use even in IE6.
This will ofcource demand javascript but that will have to do.