I have a counter in my html code. I want to align this counter in the middle of the site. There is a helper class, called text-align which works with almost all objects on the site but i don't know how to align a script entry.
My code looks like this:
<section class="wow fadeIn">
<div class="container-fluid full-screen position-relative no-padding no-transition" >
<div class="opacity-medium bg-white"></div>
<div id="animated-balls"></div>
<div class="slider-typography xs-position-inherit">
<div class="slider-text-middle-main">
<div class="slider-text-top slider-text-middle2">
<!-- logo -->
<div class="coming-soon-logo"><img class="logo-style-2" src="images/offene-stadt.png" alt=""/></div>
<!-- end logo -->
<span class="coming-soon-title text-uppercase gray-text margin-ten no-margin-lr no-margin-bottom">We're getting ready to launch</span>
<!-- time -->
<div id="counter-underconstruction2" class="white-text text-center margin-two no-margin-lr no-margin-bottom"></div>
<div id="countdown-target" class="text-center"></div>
<script>
var myCountdown1 = new Countdown({time:86400*20});
</script>
</div>
<!-- end time -->
You can set a target to point it at a specific item so try this:
<div class="slider-text-top slider-text-middle2">
<!-- logo -->
<div class="coming-soon-logo"><img class="logo-style-2" src="images/logo-light-big.png" alt=""/></div>
<!-- end logo -->
<span class="coming-soon-title text-uppercase gray-text margin-ten no-margin-lr no-margin-bottom">We're getting ready to launch</span>
<!-- time -->
<div id="counter-underconstruction2" class="white-text text-center margin-two no-margin-lr no-margin-bottom"></div>
<i class="icon-anchor medium-icon"></i>
<div id="countdownTarget" class="center-block"></div>
<script>
var myCountdown1 = new Countdown({time:316, target: "countdownTarget"});
</script>
<!-- end time -->
</div>
And then use your existing text-align technique on the #countdownTarget to position it how you like.
Related
Okay so, This error is keep on popping up and I don't understand why am I getting this error at all? I know there are some reserved words for contactform-7 but hey I changed everything to your now what?
<div id="form" method="post" your-name="send">
<!-- col start -->
<div class="col-sm-6 col-md-6 col-lg-6">
[text* name id:your-name class:requiredField class:your-name placeholder "Your Name"]
</div>
<!-- col end -->
<!-- col start -->
<div class="col-sm-6 col-md-6 col-lg-6">
[email* email id:your-email class:requiredField class:your-email placeholder "Email"]
</div>
<!-- col end -->
<!-- col start -->
<div class="make-space">
[text* subject id:your-subject class:requiredField class:your-subject placeholder "Subject"]
</div>
<!-- col end -->
<!-- col start -->
<div class="make-space">
[textarea* message class:requiredField class:your-message placeholder "Message"]
</div>
<!-- col end -->
<div>
<!-- button start -->
<div class="more-wraper more-wraper-form">
<div class="more-button">
[submit class:more-button-wrapper "Submit"]
</div>
</div>
<!-- button end -->
</div>
</div>
Unavailable names ("name") are used for form controls. Please help me out will ya?
I'm trying to make an FAQ page using an accordion. In some of the answers I tried to make a clickable link, that will direct you to another question (I don't want the page to refresh).
With what I have now, the opened question (containing the link) will close the accordion after clicking, and open the desired accordion. The only thing missing is that the page will not scroll to the new question.
What I've got:
function openQuestion(q) {
jQuery('.accordion-toggle').removeClass('active');
jQuery('.accordion-container').fadeOut(500);
var accordions = jQuery('.accordion-toggle');
var accordion = accordions[q - 1];
jQuery(accordion).addClass('active');
jQuery(accordion).next('.accordion-container').slideToggle(500);
}
I assume the next jquery line would contain something with scrollIntoView. But no succes yet.
This is what I use in HTML
text
<div class="entry">
<h3>FAQ</h3>
<p>...</p>
<div class="clear"></div>
<div class="accordion wrapper">
<h3 class="accordion toggle active">
...
</h3>
<div class="accordion-container" style="display: block;">
<div class="content-block">
<span style="font-weight: 400;">...</span>
</div>
</div>
<!-- end accordion container -->
<h3 class="accordion toggle">...</h3>
<div class="accordion-container" style="display: none;">...</div>
<!-- end accordion container -->
</div>
</div>
I'm new to rails and stack over flow, I would be grateful to you all if I can guided here.
I'm developing a test site which is like a personal blog just to add portfolio for one user.
I have a scaffold "Dashboard" which is used to update homepage information of the website such as Titles, Banners, About Me etc.
All text of from the database is coming on the homepage perfectly fine.
However, banner images are not coming appropriately as per the theme style.
My problem - When the banner is added the text above the banner gets hidden.
Below is my code for your kind reference, I'm sure I'm making some mistake in this line
<div class="swiper-slide cover-background" style="background-image:url('<%= image_tag dashboard.banner1.url %>');">
However, unable to rectify it yet.
Original line of code:
<div class="swiper-slide cover-background" style="background-image:url('http://placehold.it/1920x1080');">
any help or suggestion would be great.
Complete Code for reference
<% #dashboards.order('created_at ASC').limit(1).each do |dashboard| %>
<section class="no-padding main-slider height-100 mobile-height wow fadeIn">
<div class="swiper-full-screen swiper-container height-100 width-100 white-move">
<div class="swiper-wrapper">
<!-- start slider item -->
<div class="swiper-slide cover-background" style="background-image:url('<%= image_tag dashboard.banner1.url %>');">
<div class="opacity-extra-medium bg-black"></div>
<div class="container position-relative full-screen">
<div class="slider-typography text-center">
<div class="slider-text-middle-main">
<div class="slider-text-middle">
<div class="alt-font text-white text-uppercase font-weight-700 letter-spacing-minus-3 title-extra-large margin-two-bottom width-60 center-col md-width-80 sm-margin-four-bottom xs-width-90 xs-margin-25px-bottom xs-letter-spacing-0"><%= dashboard.name %></div>
<div class="btn-dual">
About Company
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end slider item -->
<% end %>
Using the image_tag helper will generate and return a complete a HTML tag like <a src="foo/bar.jpg" /> not just the URL which you need in your example.
Just change this line
<div class="swiper-slide cover-background" style="background-image:url('<%= image_tag dashboard.banner1.url %>');">
to
<div class="swiper-slide cover-background" style="background-image:url('<%= dashboard.banner1.url %>');">
I need to click on the link that says "Customer One". Currently I am using
//div[contains(#class,'client-info') and contains(div/text(),'Customer')]
Using Firepath, this returns four seperate elements (I have attached code that includes two of them), and I think that is why Selenium Webdriver is unable to find the element I would like to click.
I Need to click the very last instance of this xpath, but it doesn't appear possible to be any more specific, as they have the same class and inner text!
<div class="wg-client-row-mobile hidden-sm hidden-md hidden-lg">
<div class="row">
<div class="col-xs-11">
<span class="icon icon-user" ng-class="{'icon-user': !wgClientItemCtrl.client.isAnOrganization, 'icon-business': wgClientItemCtrl.client.isAnOrganization}"/>
<div class="client-info">
<div class="client-name not-long-text ng-binding">Customer One</div>
<!-- <div class="client-age not-long-text" ng-if="!wgClientItemCtrl.client.isAnOrganization">{{wgClientItemCtrl.client.gender}}, {{wgClientItemCtrl.client.calculatedAge | notAvailable}}</div> -->
<!-- ngIf: !wgClientItemCtrl.client.isAnOrganization -->
<div class="client-age not-long-text ng-binding ng-scope" ng-if="!wgClientItemCtrl.client.isAnOrganization">
<!-- end ngIf: !wgClientItemCtrl.client.isAnOrganization -->
<!-- ngIf: wgClientItemCtrl.client.isAnOrganization -->
<div class="client-age not-long-text ng-binding">
</div>
</div>
<div class="favorite-right-container">
</div>
</div>
<div class="wg-client-row-desktop hidden-xs hidden-is">
<div class="row content">
<div class="col-sm-4">
<div class="icon icon-user" ng-class="{'icon-user': !wgClientItemCtrl.client.isAnOrganization, 'icon-business': wgClientItemCtrl.client.isAnOrganization}"/>
<div class="client-info">
<div class="client-name not-long-text ng-binding">Customer One</div>
</div>
You can use last() to get the last instance matched by the inner XPath :
(//div[contains(#class,'client-info') and contains(div/text(),'Customer')])[last()]
I am trying to get the slider to work here and think I have the code but something isn't working right. It is only showing the image in the CSS and not rotating through the other ones.
Script in Header:
var images=new Array('/images/home/AC-InStock-Rotating.jpg', '/images/home/AC- MXV-Rotating.jpg', '/images/home/AC-Rental-Rotating.jpg');
var nextimage=0;
doSlideshow();
function doSlideshow(){
if(nextimage>=images.length){nextimage=0;}
$('.home-middle-part')
.css('background-image','url("'+images[nextimage++]+'")')
.fadeIn(500,function(){
setTimeout(doSlideshow,1000);
});
}
Body:
<div class="home-middle-part">
<div class="container clearfix">
<div class="grid_12 omega" >
<div class="grid_6 omega" >
<div style="padding-left: 10px;">
</div>
</div> <!-- end of grid 6-->
<div class="grid_6 omega" >
<div>
<table>
</table>
</div>
</div> <!-- end of grid 6-->
</div> <!-- end of grid 12 -->
</div> <!-- end of container clearfix -->
</div> <!-- end of home-middle-part -->
CSS
.home-middle-part {
background-image: url("/images/home/body-image banner1.jpg");
background-repeat: no-repeat;
}
You script in the header is running before the browser knows that .home-middle-part exists. You need doSlideshow(); to run after the HTML has been parsed. You can do this by moving your script tag the bottom of the page or you can wrap your call to doSlideshow() in $(document).ready() like so:
$(document).ready(function() {
doSlideshow();
});