The Web Design & Development Megathread

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

Vintersorg: Mar 3, 2004; President of
the Brendan Fraser
Fan Club

EDIT: this is the entirely wrong thread

Vintersorg fucked around with this message at 22:20 on Jul 3, 2013

# ¿ Jul 3, 2013 16:14

Adbot: ADBOT LOVES YOU

# ¿ Apr 28, 2024 00:45

Vintersorg: Mar 3, 2004; President of
the Brendan Fraser
Fan Club

Is there a way in CSS transitions to fade something out, wait, then bring in the next slide?

I am using Twitter Bootstrap and found stuff online for introducing a fade. The client tho doesn't like the way text crossfades since you can still see the other letters. So we want to introduce a white delay between things.

code:

carousel.carousel-fade .item, .carousel-caption h1 {
	 -webkit-transition: opacity 1.2s ease-in-out;
	-moz-transition: opacity 1.2s ease-in-out;
	-ms-transition: opacity 1.2s ease-in-out;
	-o-transition: opacity 1.2s ease-in-out;
	transition: opacity 1.2s ease-in-out;
	-webkit-backface-visibility: hidden;
	-webkit-perspective: 1000;
	filter: alpha(opacity=50);
}

.carousel.carousel-fade .active.left,
.carousel.carousel-fade .active.right {
  left: 0;
  z-index: 2;
  opacity: 0;
  filter: alpha(opacity=0);
}

That is the CSS stuff. And the boostrap Carousel does it's own thing. It really shouldn't be a issue but im banging my head as it's bit out of nowhere as most people WANT the crossfade.

# ¿ Jul 11, 2013 22:07

Vintersorg: Mar 3, 2004; President of
the Brendan Fraser
Fan Club

Depressing Box posted:

What you're looking for is transition-delay applied to the .next item, so the background color will show through. Here's a quick modification of the example Bootstrap carousel to fade to white:

CSS code:

.carousel-inner > .item {
  -webkit-transition: 0.6s ease-in-out opacity;
     -moz-transition: 0.6s ease-in-out opacity;
       -o-transition: 0.6s ease-in-out opacity;
          transition: 0.6s ease-in-out opacity;
}

.carousel-inner > .active {
  opacity: 1;
}

.carousel-inner > .next {
  transition-delay: 1s;
}

.carousel-inner > .next,
.carousel-inner > .prev,
.carousel-inner > .next.left,
.carousel-inner > .prev.right,
.carousel-inner > .active.left,
.carousel-inner > .active.right {
  opacity: 0;
}

This was awesome and did what I wanted!

But then my boss came down and said since transitions do not work with IE8 or 9 I had to code my own little jquery thing.

# ¿ Jul 12, 2013 16:56

Vintersorg: Mar 3, 2004; President of
the Brendan Fraser
Fan Club

I think if you hover it stops moving.

# ¿ Jul 17, 2013 20:03

Vintersorg: Mar 3, 2004; President of
the Brendan Fraser
Fan Club

Yeah, we use mailchimp here and it's loving awesome to work with.

# ¿ Jul 25, 2013 22:43

Vintersorg: Mar 3, 2004; President of
the Brendan Fraser
Fan Club

Little IE bug and not sure how to fix it. I am using a combination of bootstrap and Cycle2's Carousel Pager (http://jquery.malsup.com/cycle2/demo/caro-pager.php). It displays 3 items at a time with the "feature" in the middle. Chrome and Firefox render it fine, everything works and on W3 the output HTML validates as fine. Aside from this IE bug the rest of the site works perfect and if I had it my way id just launch it like this. But having a empty grey area isn't desirable. Unsure why it's doing this at all as nothing really seems too complicated as its just a bunch of divs in a slideshow.

Here is a working JSfiddle.

http://jsfiddle.net/J6bSQ/

Anyone want to take a guess for this?

In IE though the 3rd item is not displaying. I'll provide two pictures.

Chrome & Firefox

IE (taken from BrowserStack)

Not too sure why it would block this out. I have a "trick" that I think may be screwing with stuff.

CSS code:

.cycle-carousel-wrap { margin-left: 290px !important;}

(( yes, I hate important tags too but it seems they are needed to overwrite the Cycle2 inline poo poo ))

It's hard to recreate in JSfiddle but here is the snippet outputting this area.

PHP code:

<div class="featured_projects"><!-- featured projects starts -->
    <a href="#" class="nav-button cycle-prev"></a>
    <a href="#" class="nav-button cycle-next"></a>
	<h4>Featured Projects</h4>
    	<div id="slideshow-2">
    		<div id="cycle-2" class="cycle-slideshow"
            data-cycle-slides="> div"
            data-cycle-timeout="0"
            data-cycle-prev=".cycle-prev"
            data-cycle-next=".cycle-next"
            data-cycle-caption="#slideshow-2 .custom-caption"
            data-cycle-fx="carousel"
            data-cycle-carousel-visible="3"
            data-cycle-carousel-fluid=true
            data-allow-wrap="true"
            >
             <?php
            //iterate through each project
            foreach($projects as $project) { ?>
            <? $project_blurb = get_post_meta( $project->ID,'project_post_class',true ); ?>        
                <div class="project_box">
                    <div class="project_image">
                	  <a href="<?php echo get_permalink($project->ID); ?>" class="shadow">
<?php MultiPostThumbnails::the_post_thumbnail('Project', 'secondary-image', $project->ID, 'slideshow-2-size'); ?></a>
                    </div>
                	<br/>
                    <div class="project_desc">
                        <? echo "<p>" . (strlen($project_blurb) <= 200 ? $project_blurb : substr($project_blurb, 0, 200) . "...") . "</p>"; ?>
                    </div>
                </div>
            <?php } ?>
            <span class="clearfix"></span>
        </div>
    </div>
</div><!-- featured projects ends -->

# ¿ Aug 8, 2013 22:14

Vintersorg: Mar 3, 2004; President of
the Brendan Fraser
Fan Club

kedo posted:

What version of IE is giving you the problem? I'd bet a dollar it's because your container is like one or two pixels too narrow in IE due to rendering inconsistencies, so the third box is getting pushed to the next line (which isn't visible). Try either increasing the container width? ~~or maybe setting overflow-x to visible~~ (nah that probably wouldn't work)

Sadly jsfiddle is like "LALW NOPE" when I try to open it in IE8 and it's working correctly in IE9, so I can't test that for you.

It happens in both IE8 and IE9.

I'll give that a go and see what happens. Browser stack using the jsFiddle was working fine to but I'll see whats up.

What's painful is that this is all local and to see any changes I need to commit and create a entry in SourceTree. But thanks!

# ¿ Aug 9, 2013 15:29

Vintersorg: Mar 3, 2004; President of
the Brendan Fraser
Fan Club

I shrunk the boxes down by 12 pixels and it looks like it works in IE9 which is good news. IE8 is all kinds of hosed up but im going to run Google Analytics and if it's less then say, 10% users - gently caress it.

# ¿ Aug 9, 2013 17:05

Vintersorg: Mar 3, 2004; President of
the Brendan Fraser
Fan Club

Is that "var" really necessary too? Unless that is going to change why not just use the regular selector.

# ¿ Aug 9, 2013 20:02

Vintersorg: Mar 3, 2004; President of
the Brendan Fraser
Fan Club

I code in PHP and I really don't see the big deal with it. Granted this is mostly with existing backends like WordPress but I can get it to do just about anything I need.

Granted, I am not as hardcore as most here.

# ¿ Sep 4, 2013 22:32

Vintersorg: Mar 3, 2004; President of
the Brendan Fraser
Fan Club

I was handed a site to fix where they have a slider on their front page that is displaying all the divs on page load but hides em and it's good from there. I have been trying a combination of CSS and jQuery to display: none it initially and .show in a document.ready setup. That doesn't seem to be working. It just stays hidden.

Anyone know a good way around it? Ive tried "everything" I could via various searches on Google.

It only shows em for a split second but it's enough to make the client not like it.

# ¿ Mar 11, 2014 19:44

Vintersorg: Mar 3, 2004; President of
the Brendan Fraser
Fan Club

Hmm, that is a good option. With further digging this is a jQuery UI module for their tabs. I'll try fiddling.

# ¿ Mar 11, 2014 20:10

Vintersorg: Mar 3, 2004; President of
the Brendan Fraser
Fan Club

Well the site itself is http://www.mfnpo.org/

As mentioned, when you load that up it's fine. But if you go to any of the tabs up top and click back home, you'll see the stacked divs loading up.

# ¿ Mar 11, 2014 20:33

Vintersorg: Mar 3, 2004; President of
the Brendan Fraser
Fan Club

Ah, ok wicked - that's something to go on. Thank you! I popped in that CSS and it worked on page load but switching tabs flashed em all. I'll keep fiddling.

# ¿ Mar 11, 2014 21:14

Vintersorg: Mar 3, 2004; President of
the Brendan Fraser
Fan Club

After learning Wordpress inside out and loving it we've inherited a site built in Drupal and I want to tear my hair out. This system seems super unintuitive and support outside the Drupal forums is hardly there (compared to Wordpress).

Or maybe im going mental.

Im having trouble with a few things like the Calendar (https://www.drupal.org/project/calendar) and breadcrumbs. I have no idea where I can set these (ideally it would be whatever page im declaring the top menu). Diving into the PHP seems fruitless too.

If there is anywhere someone can point me in regards of either learning this system a bit better or even helpers with the calendar thing I would appreciate it.

# ¿ Apr 22, 2015 20:26

Vintersorg: Mar 3, 2004; President of
the Brendan Fraser
Fan Club

Thanks for the Drupal help on the last page. Since then ive found a way to get the breadcrumbs displaying.

I asked in the general thread but it doesn't hurt to have this floating out there. One of our server farms at MediaTemple went down around noon today and right now their support has no ETA. Our boss is a little pissed.... We host all our regular sites on Rackspace which is great but they do not have Mercurial setup (as far as I know). MediaTemple was essentially our development server (which is still up) but we had this other thing setup for a side-project.

Does anyone know of any other hosts that allow Mercurial for keeping track of things? We also use BitBucket for our own records too. But MT was all development.

(( Im actually using MediaTemple for my buddies site that he is getting me to help him out with with and its pretty good, admin stuff is pretty straight forward too ))

# ¿ May 5, 2015 21:28

Vintersorg: Mar 3, 2004; President of
the Brendan Fraser
Fan Club

Lumpy posted:

I host on rackspace and we use mercurial. I just apt-get installed it. Obviously if you have one of those cloud site things I don't think you can do that, but if you have a shell, just slap in on there.

Ah poo poo, that might be it. We have cloud hosting for all our live sites.

# ¿ May 7, 2015 21:40

Vintersorg: Mar 3, 2004; President of
the Brendan Fraser
Fan Club

Is there a reason why this isn't working? It works with a basic class or dom .prop('disabled', true); but not here. I even had this working on getting the actual attribute.

E: Using JQuery 1.15 so maybe prop wont work now that I read (and I dont have say on upgrading)

This works:

JavaScript code:

var grade_id = $("span[data-proxy-id='"+proxy_id+"']").attr("data-grade-id"); //primary key

This doesn't:

JavaScript code:

if(grade_value === "I") {
console.log("My grade ID: "+grade_id);
console.log("My grade value: "+grade_value);
$("input[data-proxy-id='"+grade_id+"']").prop('disabled', true);
}

It is firing off those logs too so I know it's getting in there.

Vintersorg fucked around with this message at 17:27 on Sep 30, 2019

# ¿ Sep 30, 2019 17:01

Vintersorg: Mar 3, 2004; President of
the Brendan Fraser
Fan Club

Ah, you're right: https://codepen.io/dmon83/pen/ZEzdppr

I think that should be ok. Doesnt' work there either.

# ¿ Sep 30, 2019 17:41

Vintersorg: Mar 3, 2004; President of
the Brendan Fraser
Fan Club

Yeah, that worked in CodePen. :lol:

Still nothing on the site - I'll keep messing with it. Thanks! Maybe it has something to do with the number coming in as a String. I can convert to Int if that helps. This feels so basic, haha.

E: Got it working - too many ID's! I was looking for the grade-id in the span but it doesn't have it. It is linked by another (proxy id - whatever that is - I didn't make this).

So once I get the data-grade-id I used that to pull the proxy-id and find the input to disable. This project is a mess.... This page is basically a big gradebook and if you put the letter I for incomplete I want to disable the calendar input so you can't pick a date.

It's not pretty but it works for now.

Vintersorg fucked around with this message at 20:31 on Sep 30, 2019

# ¿ Sep 30, 2019 20:10

Vintersorg: Mar 3, 2004; President of
the Brendan Fraser
Fan Club

Can we ask Vue questions here? I am stumbling and I am not sure what to do.

I have a calendar that is being used with a min-date prop that goes to today. How would I set it up that it allows you to pick up to 7 days in the past too?

code:

<v-date-picker
mode='range'
v-model='selectedDate'
:min-date='new Date()'
is-inline
is-required
show-caps>
</v-date-picker>

I tried adding something to my computed area but it just kept erroring out. I can't find much online for this.

E: Solution, ugh, why didn't I try this earlier.

code:

:min-date="new Date(Date.now()-604800000)"

Date calculated using milliseconds.

Vintersorg fucked around with this message at 16:09 on Oct 25, 2019

# ¿ Oct 25, 2019 15:52

Vintersorg: Mar 3, 2004; President of
the Brendan Fraser
Fan Club

Well, poo poo - what to do? Just leave it? This calendar is only ever gonna be used in our place - but we do recognize DST. :3:

# ¿ Oct 25, 2019 19:50

Adbot: ADBOT LOVES YOU

# ¿ Apr 28, 2024 00:45

Vintersorg: Mar 3, 2004; President of
the Brendan Fraser
Fan Club

Thanks for all the suggestions.

We do have moment built in already I learned which is rad and I will adapt this to use that.

# ¿ Oct 28, 2019 21:26

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