newbie here. I want to code a website by myself with html, css and javascript. Is there any way I can use the outline of a text as a "barrier" and fill the inside of the letters with objects?
Objects like those on this website: https://www.fullbundle.com/
I want those objects to be interactive to the cursor, so they only become visible if you hover over the text. Like a rippling hover effect but with objects inside.
I already tried to find an answer by myself by inspecting similar websites but I couldn't find a solution
In the next step, I want to make a scrolling effect. When the filled text gets in touch with the top of my display it bursts and the objects inside are flying all over the place.
I know it's very much for a beginner but I am curious about how it's done.
Related
Does anyone know if you can change the color of the text for specific items in a dropdown list in Adobe's extendscript ScriptUI? I know about the color section of the Script UI guide, however that says nothing about list items and I tried a few things by chance but wasn't able to find a solution.
The ScriptUI is converted to HTML5/CSS behind the scenes. Because the CSS is not exposed to the user, it is not possible to change any of the colour schemes.
You can use images for buttons to add colour to them, but that wouldn't apply to dropdowns.
I'm not certain about the other Adobe programs, but I know that creating an extension (as opposed to a script) for After Effects is a way of circumventing this restriction.
I need to draw a simple "flow chart" that is used to navigation on my site. What I have been doing now is that I've drawn this MSPaint, then I add pixelmaps so that it navigate the user to different pages according to where in the pictures he clicks.
What I also want is that the page the user is on, changes colour (for instance, if user clicks on step 3, he navigates to page 3, and the page 3 changes colour to to green).
What is the best method to implement this? SVG? Canvas? JavaScript? CSS?
All answers that can point me to the right direction is very welcome.
Your first mistake here, I'd say, is that you're using pixelmaps; for something as simple as this, I'd recommend just making it a pure HTML/CSS entity, then giving a .active class or some equivalent to whatever page you're actually on. This is the easiest way of doing things in my books, and it has the benefit of degrading gracefully if the image fails to load for whatever reason.
That said, if you don't want to do it that way and are really attached to the static image for whatever reason, you could have variants of that image where the specific step is highlighted, and display whatever image is appropriate for that page. That would accomplish what you're looking for, but I wouldn't recommend it--it's very heavy in terms of network usage when compared with an HTML solution.
Now, bear in mind you could draw this with canvas, but that seems like overkill in this situation if you're basically just drawing a navbar; if you were drawing a full flowchart already and just wanted to reuse that code, well, that would be a different story; but in this case, with static imagery, just use HTML--it's just faster and easier.
I'm putting the final touches on an application that Ive been working on for quite a while and while I understand how to restyle existing components by using inheritance Im coming up blank in my search on how to accomplish this last thing.
I want to apply a custom color/image behind the text or icon representing the current activity I am in. This would be similar to how the tabs have the highlight underneath them while selected. I am already using the tabs and have figured out how to change the image resource that is the little underline in the tab bar. Now I just need to accomplish the same look for the action items.
Ive overlooked the actionbarsherlock library for the past day and a half but I dont see anywhere that I could do what I want to accomplish. I have to imagine that such a thing can be done but like I said before so far Im coming up short. Any help would be much appreciated.
I figured out a simple way to do what I asked earlier. I just created a square shape in xml, put text over it, assigned it the gradient and color I wanted and assigned it to that action item I wanted highlighted in the activity i was in.
Can the browser feature of Ctrl+F to find text be integrated with text in popup windows.
I'd like to have some scientific reference information given when someone hovers over a species name in a web page. Generating the popup, tooltip style text is no problem, the problem is that anyone using Ctrl+F won't be able to find it, or if I position the text out of view when not required, it will be found but be invisible.
The same sort of effect applies to "accordion" style expanding text areas.
I'm looking for some sort of event generated when find is highlighting a result.
Unfortunately there is no such event, you can't interfere with the built-in find.
About the best you can do in this case is to provide your own search function in-page, which searches the DOM for Text nodes containing the given text, highlights them, and opens up any closed accordions they're in.
The only idea I have, is to put all the text from your popups in one additional scrollbox (maybe at the bottom of the page) with a height just large enough to display one set of detail information at a time. This way, it doesn't take up too much space on the page, and the text can still be found using Ctrl+F.
For the main menu, I want the first four links to be blue, and specifically the last four links to be yellow. There will only be eight menu items.
I was thinking of hard coding the yellow links into the menu div, and that way when the page loads the first four menu items (default colour blue) they will be blue, and then my hard-coded links of yellow would load up.
My question is, where can I add the "yellow" code? Where can I hard code my yellow menu items? Or is there a different, better, approach to this?
My first question would be which men u are you implementing? A lot of them have a menuitem_x sort of id that is applied to the menu markup so with the CSS you can do what you want
As for where to place the markup there are a few places
You can do it directly in the skin files (not suggested since you may have to edit a few files)
in the skin .css files (much better place to do it and more maintainable and portable)
in the admin go to Site Settings and use the stylesheet editor to add the classes to the portal stylesheet (better than #1 but not as good as #2 since its now specific to the portal and not the skin so it wont be as portable)
Number 3 - works good if you dont have access to the skin or dont want to change it for other reasons
You could use Javascript within the skin.
We have done simular in the past for DNN menus but i keep away from the skinning side so dont have any examples, sorry.
Google does though :)
I would use one of the specific SEO friendly DNN menu modules that generate clean code that can be followed by search engines. I usually use one of them, except for projects where I don't have SEO concerns. When you have a menu with clean markup, like a list, you can change the colors using jQuery and specifying the first four items. You can probably do it like this, one by one. There may be a better selector for grabbing the first four items which is something I have never used.
Solved it, not as dynamic as I'd like, but it works.
The way I've done it is I'm playing with id tags, rather than class tags. Using ID, I can pick out the individual menu items and apply CSS to them.
Essentially, it looks like I've done what 'codemypantsoff' suggested. Thanks!