Wordpress Themes - WP Forum at BFA
There will be no more development for Atahualpa (or any other theme), and no support. Also no new registrations. I turned off the donation system. I may turn the forum to read only if it gets abused for spam. Unfortunately I have no time for the forum or the themes. Thanks a lot to the people who helped in all these years, especially Larry and of course: Paul. Take care and stay healthy -- Flynn, Atahualpa developer, Sep 2021

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Center area post/pages »

[SOLVED] Browser ignoring CSS Position: property - help me rule out ATA or WP please


  #1  
Old May 10, 2012, 08:26 AM
arthurmild
 
50 posts · Aug 2010
Cape Town
[SOLVED] Browser ignoring CSS Position: property - help me rule out ATA or WP please

Hello,

I want to use a simple image fader on this WP site with ATA theme - http://bit.ly/KNT3rl

Chrome and firebug tell me that the relevant CSS is being read but the browser is ignoring the positioning property

Consequently the images float under each other rather than being absolutely positioned and shuffled due to z index

I have given imgs coloured 6px borders to show what is going on

For reference here is another site I built where the effect works as it should

QUESTION: is there something about either WP or ATA which would cause the position propery to be ignored/overidden

PS - it still gets ignored if I use !important;

CSS -

Code:
.post div#slideshow IMG {
* * position:absolute;
* * top:0;
* * left:0;
* * z-index:8;
* * opacity:0.0;
	border:solid 6px yellow;
}
  #2  
Old May 10, 2012, 08:37 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
where are you adding the jscript?
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #3  
Old May 10, 2012, 10:09 AM
arthurmild
 
50 posts · Aug 2010
Cape Town
At the moment - and as a planned temp measure - it is hard coded into header.php - (see extract below)

But - I started off pasting it into ATO HTML/CSS inserts - Header Section

The script seems to execute by virtue of the opacity fading and 'class' appendages to each image (as evidenced by the border color changes)

Just the positioning doesnt' do its thing..


Code:
...

</head>	

<body <?php body_class(); ?><?php bfa_incl('html_inserts_body_tag'); ?>>
<?php bfa_incl('html_inserts_body_top'); ?>


<div id="wrapper">


<!-- psd image rotation -->
	
	<script type="text/javascript">

SCRIPT HERE...
  #4  
Old May 10, 2012, 10:50 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
Depending on what the script does, I seen jscripts ignore CSS positioning. This is one of the issues with the fade in/out code Atahualpa uses (CrossSlide jQuery plugin by Tobia Conforto). It ignores the CSS positioning and puts things at position 0,0

without access to the script/plugin I can't tell you much - have you asked the author about it?
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Last edited by lmilesw; May 10, 2012 at 01:05 PM.
  #5  
Old May 10, 2012, 11:28 AM
arthurmild
 
50 posts · Aug 2010
Cape Town
Thanks JD -

It may have to go in the 'weird' pile then...

FWIW here is the script and the CSS - and as per the OP my site where it executes as it should


Code:
	<script type="text/javascript">




/*** 
    Simple jQuery Slideshow Script
    Released by Jon Raasch (jonraasch.com) under FreeBSD license: free to use or modify, not responsible for anything, etc.  Please link out to me if you like it :)
***/




function slideSwitch() {
    var $active = $('#slideshow IMG.active');




    if ( $active.length == 0 ) $active = $('#slideshow IMG:last');




    // use this to pull the images in the order they appear in the markup ...
	
		// 1. commented out the two lines  in script below - 
		// 2. IF remove class="active" from first image in html
		// 	  effect is all images are random - but it takes time to load images on reresh or new page - effect is white gap.
		// 3. SO keep class="active" on one image - thsi willbe key image for every page, all images thereafgter will be random
	
	
   		// var $next =  $active.next().length ? $active.next()
      	
		//  : $('#slideshow IMG:first');




    // uncomment the 3 lines below to pull the images in random order - AS DONE HERE
 
 
     var $sibs  = $active.siblings();
     var rndNum = Math.floor(Math.random() * $sibs.length );
     var $next  = $( $sibs[ rndNum ] );


    $active.addClass('last-active');


    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1200, function() {
            $active.removeClass('active last-active');
        });
}



$(function() {
    setInterval( "slideSwitch()", 5000 );
});




	</script>
Code:
.post div#slideshow {
position: relative;
height: 260px;
width: 780px;
float:left;
border:solid 4px green;  /* steve for debug only */

}



.post div#slideshow IMG {
position:absolute;
top:0;
left:0;
z-index:8;
opacity:0.0;
border:solid 6px yellow;  /* steve for debug only */
}




.post div#slideshow IMG.active {
z-index:10;
opacity:1.0;
border:solid 6px red;  /* steve for debug only */
}



.post div#slideshow IMG.last-active {
* * z-index:9;
}
  #6  
Old May 10, 2012, 02:16 PM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
ummm...so...just where did you put that css?
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] tag inserted between sliced <img>'s - a WP thing? but want to rule out ATA arthurmild Center area post/pages 2 Apr 16, 2012 10:30 PM
Inserting horizontal rule removes the content of the whole post Jacek01 Center area post/pages 7 Apr 24, 2011 07:04 PM
[SOLVED] Modifying horizontal rule RHCdG Header configuration & styling 4 Feb 27, 2010 12:07 PM
[SOLVED] Add property in index.php miseroprospero Center area post/pages 6 Feb 1, 2010 07:11 AM
[SOLVED] Align horizontal rule in body of post PrairieProg Center area post/pages 2 Dec 29, 2009 03:20 PM


All times are GMT -6. The time now is 09:30 AM.


Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.