I'm looking for a solution to activate a CSS3 Animation when in viewport without changing the class of the container. Any suggestions?
What I've done is a wordpress shortcode to wrap an element with the animate.css classes
function bounce( $atts, $content = null ) {
return '<div class="animated bounce">'.do_shortcode($content).'</div>';
}
add_shortcode("Bounce", "bounce");
function flash( $atts, $content = null ) {
return '<div class="animated flash">'.do_shortcode($content).'</div>';
}
add_shortcode("Flash", "flash");
This will output
<div class="animated bounce">My Content</div>
or
<div class="animated flash">My Content</div>
Now I only want the animation to start when it's in the viewport. But as I added it as a shortcode I don't know the class of the parent element to add the "animated bounce" when its entering the viewport AND as the customer could use this shortcode at ANY position in the theme it could also be the same class on multiple areas on the site. so it really needs to look for the single element, not the element class.
I guess I have to load the shortcode when in viewport, not the animation. But I don't know how. Remember: The same shortcode could be 10 times on one page, but every single of those 10 shortcodes should only shoot if they are visible right now.
Hope you understand my problem and can serve a solution. Thank you in advance!
Related
My web app shows body background for a second then it loads the dynamic background when i route from one page to another. I am trying to remove that white flash by adding a splash screen using AngularJS. I looked at some tutorials but were not able to find exact solution.
how do i avoid showing the white body background before my div background loads?
any suggestions?
HTML
<body class="hold-transition skin-blue sidebar-mini sidebar-collapse">
<div class="wrapper" ng-style="{'background': backgroundImg}" >
<div class="content-wrapper">
<section class="content">
<div ng-view></div>
</section>
</div>
</body>
my route
$routeProvider.when('/about',{
templateUrl:'partials/about.php',
controller: 'pageController'
});
My controller
app.controller("pageController",function($scope, $rootScope){
$scope.title = "About Us";
$rootScope.backgroundImg="url('http://abounde.com/uploads/images/abt-min.jpg')"; //abt bg
$scope.$on('$viewContentLoaded', function() {
console.log("about page loaded");
});
});
From what I understand, the pb is that when you route to another page then you launch a new request to download your background with your url(...). Because this request can take time then you have your white screen.
So a solution could be to "preload" all background images when you open your app. So before displaying anything on your app you can display a "loading..." div. In background download all your backgrounds.
Once this is done, when changing route then simply change the css class of your wrapper div to the css class containing the correct background image.
On this particular page, you could have a div that wraps the entire document.
Give this div a class with css ie .document-wrapper-invisible
in your css give .display-none class a display property of none
.dislay-none {
display: none;
}
When your view content loaded function runs, remove this class. You can simply set a variable to be true and use ng-class to conditionally remove the class. ie
<div ng-class="{display-none: !documentLoaded}">
// your page content
</div>
in your controller
$rootScope.$on('$viewContentLoaded', function() {
console.log("about page loaded");
$scope.documentLoaded = true;
});
Something along these lines should work (I've only ever used rootScope for the viewContentLoaded event, if $scope works on it's own then great)
How can I have different breadcrumbs background pictures, depending on visited page? Is this possible without using some additional modules?
You really don't need a module for this. What you can do is specify a div id on each page (in the content), and then, you will have a CSS that is something like the following:
#page-123 .breadcrumb{
background-color: #ff0000; /* background color is red */
}
I think the easiest way is to modify the index.php file of your template:
Something along the lines:
<head>...</head>
<?php
$params = &$app->getParams();
$pageclass = $params->get('page_title');
$pageclassname = str_replace(' ', '-' ,strtolower($pageclass));
?>
<body id="<?php echo $pageclassname; ?>"> ... </body>
That way you have a nice id that you can use for all your styling needs and your css code is more readable.
I have created my custom menu having many items and sub items, the markup is like this Itembut for parent element I need to replace anchor tag with the span tag having some class for styling purpose, only for my parent elements. It should be like this, <span class="my-class">Parent Element</span>. Can any one please guide me?
you can control your css by applying certain css to the menu as below:
<?php
wp_nav_menu( array('theme_location' => 'header-menu' ,'container_class'=> 'header')); ?>
I have styled my images on my Content Page Template to have borders, backgrounds and box-shadow. If I don't use the optional image field and leave it empty, it leaves the css styling with a small box. I have been trying to hide the entire .content-img class if there is no image present. The code below works fine for rendering the images if they are present. How to hide it if no image is present.
<?php the_field('top_headline'); ?></h1>
<div class="content-top"><?php the_field('content_top'); ?></div>
<div class="content-img"><?php
$image = get_field('content_image');
$size = 'medium'; // (thumbnail, medium, large, full or custom size)
if( $image ) {
echo wp_get_attachment_image( $image, $size );
} ?>
Thanks for your help in advance.
So I took care of it using CSS instead of in the array. instead of using the css class .content-img (which is my parent div), I added the image to the class .content-img img and if no image is present, the css wont show.
I have div box which contains two items. One is under the other one. So when the lower item is hover I'd make it animated and slide it out of the top item.
<div id="main">
<div id="box"></div>
<div id="item"></div>
</div>
With my knowledge in CSS3 I could only make a transition for item to slide it out in hover. But I want it happen when #main is hover not #item.
Have a look at the them please.
http://jsfiddle.net/sL3Pw/
You are correct, there is no way currently to style a parent element of a child in pure CSS. You can use JavaScript as a way to achieve the desired effect.
(UPDATE)
You can achieve this in JavaScript by doing the following (DEMO: Fiddle)
JS
This should run onload or else it will not work.
// On Hover
document.getElementById('main').onmouseover = function () {
document.getElementById('item').classList.add("to-left"); // Add To Left Class
}
// OnMouseOut (Not Hover)
document.getElementById('main').onmouseout = function () {
document.getElementById('item').classList.remove("to-left"); // Remove To Left Class
}
Please remember to change the IDs of the elements if needed.
CSS
Add this CSS class to your CSS
.to-left {
margin-left: 60px;
}
And your HTML stays the same. This should get what I believe your desired result is. Let me know if this works for you.