The Web Design & Development Megathread

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > The Web Design & Development Megathread

stoops: Jun 11, 2001

I would like to get into HTML5 a bit, focusing more on canvas, and being able to draw spectrograms.

At my work, my colleagues use c++ and other programs to draw spectrograms, but, with me being the "web guy", I want to be able to port this onto the web.

Is this at all possible right now?

I googled spectrograms and html5 and i saw that a web audio api can do that, sorta, but with wav files.

If anyone can recommend me some solid books, even if it's just basic canvas drawings for now, I'd appreciate.

# ¿ Jul 2, 2013 15:55

Adbot: ADBOT LOVES YOU

# ¿ Apr 27, 2024 22:09

stoops: Jun 11, 2001

I would like to try to implement this function on a webpage, but I'm not sure what it's called so I can google it.

http://elegantthemes.com/preview/Divi/

On the left side, you see a little star/bolt that, when clicked, expands a div. I don't really have a use for it to customize the theme, but I do want that functionality, where a div with it's own content, expands.

Any help or points in the right direction is appreciated.

# ¿ Feb 7, 2014 21:34

stoops: Jun 11, 2001

I'm trying to work with css3 filters on images, mainly hue-rotate.

Do these filters work on background images and divs? I can get the filters to work on standalone images, but not when I have a div with a background image.

# ¿ Feb 10, 2014 23:01

stoops: Jun 11, 2001

I'm using this to display my webroot files in a "modern" way

http://larsjung.de/h5ai/. The Demo is here: http://larsjung.de/h5ai/sample/

I have it installed, and it works good, except, that my svg icons aren't showing up.

Currently, the site is on an intranet, but not sure if that is the problem. If i go directly to the svg icon, it renders fine, but it doesnt render on my index page.

Any ideas on what I could check or do? I appreciate any help.

# ¿ Mar 25, 2014 20:58

stoops: Jun 11, 2001

Is there an easy way to create a div on an existing site that overlays the entire site?

Or would I have to restructure the divs currently on my site?

I'm trying to create a "loading" div that, when called up, would show right in the middle , horizontally and vertically, over everything else currently on the page.

# ¿ Jul 17, 2014 15:56

stoops: Jun 11, 2001

I'm using twitter bootstrap

3 columns.

The middle column will have my content. The left and right columns will have an image.

The thing is, I want the images to always be at the bottom of the left and right column divs.

What is the best way to go about it? Should I make each column a background image and set the position to bottom? Or should i keep the image separate and somehow tell it to go to the bottom?

# ¿ Dec 30, 2014 16:44

stoops: Jun 11, 2001

The Dave posted:

What's your browser compatibility situation? Could you use flexbox and whistle away?

I just need it to look good on modern browsers and mobile devices.
I had never heard of flexbox. I'll take a look at that. I'm assuming it's compatible with bootstrap?

Currently this is my code

code:


<style>
#leftColumn {
	position: relative;
}
#leftColumn img {
	position: absolute;
	bottom: 0;
}
</style>

<div class="container-fluid">	
        <div class="row">
            <div id="leftColumn" class="col-md-2">
                <img src="image1.png" >
            </div>
            <div class="col-md-8">
                my content
            </div>
            <div class="col-md-2">
               <img src="image2.png" >
            </div>
        </div>
</div>

But this puts the image1 way at the top! Nonetheless, I'll read into flexbox, thanks.

# ¿ Dec 30, 2014 18:01

stoops: Jun 11, 2001

I have this odd problem, hopefully someone can explain.

I have a form on an intranet, that when submitted, runs an ajax call and spits out an image.

The image being generated can take up to 40 seconds to complete.

Firefox and Chrome and Safari spit out the image, no problems.

Once i post that page to an outside site where the public can get to it, Firefox and Chrome spit out the image, but Safari just hangs. A quick google search tells me that Safari times out after so many seconds and that there's nothing i can do about it.

But i'm not sure why it would work on the intranet and not public?

If this is more of a jquery problem, I can delete and post on the appropriate forum.

# ¿ Jan 16, 2015 16:48

stoops: Jun 11, 2001

I have this search form on my homepage with fields: location, type, and priceFrom and priceTo

The type is a dropdown and the prices are textboxes.

My problem is that the prices are acting like the TYPE dropdown, meaning, when i click on the textboxes, the Type dropdown comes up.

I found that the solution may be in this style

code:

media="all"
.dsidx-resp-area input[type="text"], .dsidx-resp-area select {
    width: 100%!important;
}

On inspection, when i uncheck that width, the price boxes work.

My problem is, the stylesheet the code is on is on an outside cdn.

I guess i can copy down that stylesheet and remove it manually, but is there a way where i can override the width and say don't use a width?

I find if i put in width=0px, the dropdown doesn't work for the type.

if it doesn't make any sense, i can post up a dev link

Any help is appreciated.

# ¿ Mar 9, 2016 16:43

stoops: Jun 11, 2001

I need some recommendations on some text editing software.

I mainly code in php and I tend to use Dreamweaver and Notepad++.

Dreamweaver mostly because it has the file directory on the side and i can upload on save.

Is there any text editors that can do the same, that kind of has Dreamweaver's, explorer-tree, view?

I've looked at Sublime and it just doesn't have it the way I want it.

The problem is, Dreamweaver uses tabs instead of spaces, so when another person on my team opens my code, the code looks whack.

The other person on my team is more linux based, so he uses whatever text editor is on his console. I'm still new to linux commands so I'm trying to find something in the meantime.

Thanks for any recommendation.

# ¿ Jul 25, 2016 15:25

stoops: Jun 11, 2001

Can anyone tell me how this is done, er, the process it goes thru?

https://www.coutts.com.

When you click to another page, a loader shows up right at the very top of the first page, going from left to right. Once it fills up, it goes to the next page.

It feels ajaxy, but the url seems to get refreshed.

# ¿ Oct 24, 2016 16:05

stoops: Jun 11, 2001

I'm not sure if this is a script or a css question.

I have a small arrow icon that is horizontal on big screens. The icon is done with a class.

What I'd like to do is make the arrow icon vertical (basically changing the class) when it's on a small screen or resized.

Can i use media queries for that? Or would I have to use jquery to listen to the browser change size and then change the class?

Any help is appreciated.

# ¿ Dec 14, 2016 23:51

stoops: Jun 11, 2001

I use bootstrap alot but I still don't know how some things work,.

I have a standard bootstrap page: one container, with one row with 2 columns. I want the columns to fill up the whole page 100% height. I thought I could do that using bootstrap sizing, but it's relative to the parent.

How do I make it take up the whole page?

Any help is appreciated.

My code is below, or you could just click my page

code:

<div class="container-fluid">
	<div class="row">
		<div class="col-sm-8">
			<div style="height: 100px; background-color: rgba(255,0,0,0.1);">
				<div class="h-25 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 25%</div>
				<div class="h-50 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 50%</div>
				<div class="h-75 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 75%</div>
				<div class="h-100 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 100%</div>
			</div>
        	</div>
		<div class="col-sm-4">     	
	        	<div style="height: 100px; background-color: rgba(255,0,0,0.1);" >
				<div class="mh-100" style="width: 100px; height: 200px; background-color: rgba(0,0,255,0.1);">Max-height 100%</div>
			</div>     
       		</div>
	</div>
</div>

# ¿ Mar 28, 2018 16:12

stoops: Jun 11, 2001

I'm looking for something like this example, where you can drag the middle part from left to right and vice versa.

https://www.w3schools.com/html/tryit.asp?filename=tryhtml_default

Googling has mentioned jqueryui and resizable, but i'm not entirely sure how to go about it.

Is there another name for this functionality to do a better google search

Any help is appreciated, thanks.

# ¿ Jan 23, 2020 19:33

Adbot: ADBOT LOVES YOU

# ¿ Apr 27, 2024 22:09

stoops: Jun 11, 2001

MrMoo posted:

Like this one?

https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_resize_height

Nolgthorn posted:

It's a drag handle on a vertical divider. There are drag handles on everything so I'm not sure there's a better description for it. The implementation will depend on what you have either side of the divider, so if you're using a pre-built solution you might have to fux with it. I'd just capture mouse down, track the position, and capture mouse up.

Thanks. i guess i was overthinking it. I'll use MrMoo's link example on my div

# ¿ Jan 23, 2020 20:57

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > The Web Design & Development Megathread