Hi,

Could you please share your code so I can check it? An online demo would be great.

Thanks.

Here is the javascript I added:

<script type=”text/javascript” src=”//s3.amazonaws.com/downloads.mailchimp.com/js/signup-forms/popup/embed.js” data-dojo-config=”usePlainJson: true, isDebug: false”></script><script type=”text/javascript”>require([“mojo/signup-forms/Loader”], function(L) { L.start({baseUrl“}) })</script>

A demo of the site can be seen at www.zoobl.com

Thanks!

Have you tried to add the JS codes at the end of page? After script.js

BTW, you can add your googleAnalyticsId to script.js file, so you don’t need to place the google code inside your html file.

Moving the JS to the end of the page fixes the slider, but the MailChimp script doesn’t work then

Hi,

Yes, you can expand the swiper to be full width by removing “offset-md-3 col-md-6” classes. Something like the following code:

<div class="swiper-container swiper-button-box">
  <div class="swiper-wrapper">
    <div class="swiper-slide"><img src="assets/img/bg-girl.jpg" alt="..." /></div>
    <div class="swiper-slide"><img src="assets/img/bg-man.jpg" alt="..." /></div>
    <div class="swiper-slide"><img src="assets/img/bg-cup.jpg" alt="..." /></div>
  </div>

  <div class="swiper-button-prev" />
  <div class="swiper-button-next" />

  <div class="swiper-pagination" />
</div>

Let us know if you need more help.

Hi, thanks for your fast reply! The locations of the swiper buttons and the progress indicator are okay now. But how can I reduce the width of the slider content to align with the content of the topbar? Maybe you could just correct the following code:

          <section class="section" id="section-teaching">

          <header class="section-header">
            <h2>Teaching</h2>
            <hr />
            <p class="lead">Teaching abstract</p>
          </header>

              <div class="swiper-container swiper-button-box swiper-button-hidden1" data-space-between="20">
                <div class="swiper-wrapper">
                  <div class="swiper-slide">                  

<!-- Modified slide-->                            
            <div class="row">
            <div class="col-12 col-md-6 text-center">
              <img class="mr-40" src="assets/img/phone-2.png" alt="..." />
            </div>

            <div class="col-12 col-md-6 align-self-center pb-70">
              <h3>More Than You Think</h3>
              <p>Dramatically reintermediate effective applications after high-payoff core competencies. Authoritatively optimize collaborative benefits for error-free communities. Dramatically reintermediate effective applications after high-payoff core competencies. Authoritatively optimize collaborative benefits for error-free communities.</p>

              <br /><br />

              <div class="flexbox flex-grow-all gap-items-3">
                <div>
                  <p><i class="fa fa-tv text-warning fs-30" /></p>
                  <h5>Productivity</h5>
                  <p>Appropriately communicate frictionless schemas rather than magnetic process improvements.</p>
                </div>

                <div>
                  <p><i class="fa fa-code text-danger fs-30" /></p>
                  <h5>Synchronize</h5>
                  <p>Appropriately communicate frictionless schemas rather than magnetic process improvements.</p>
                </div> 
              </div>

            </div>
            </div>
<!-- End of modified slide-->

                  </div>
                  <div class="swiper-slide"><img src="assets/img/bg-man.jpg" alt="..." /></div>
                  <div class="swiper-slide"><img src="assets/img/bg-cup.jpg" alt="..." /></div>
                </div>

                <div class="swiper-button-prev" />
                <div class="swiper-button-next" />
                <div class="swiper-pagination" />
              </div>

          </section>

Best regards, Michael

Hi,

You should place your code inside .container, .row, and .col-* classes. Also, your code wasn’t HTML5, don’t close your divs with />. Here’s the working code:

<section class="section" id="section-teaching">

  <header class="section-header">
    <h2>Teaching</h2>
    <hr />
    <p class="lead">Teaching abstract</p>
  </header>

  <div class="container">
    <div class="row">
      <div class="col-12">
        <div class="swiper-container swiper-button-box" data-space-between="20">
          <div class="swiper-wrapper">
            <div class="swiper-slide">                  

              <!-- Modified slide-->                            
              <div class="row">
                <div class="col-12 col-md-6 text-center">
                  <img class="mr-40" src="assets/img/phone-2.png" alt="..." />
                </div>

                <div class="col-12 col-md-6 align-self-center pb-70">
                  <h3>More Than You Think</h3>
                  <p>Dramatically reintermediate effective applications after high-payoff core competencies. Authoritatively optimize collaborative benefits for error-free communities. Dramatically reintermediate effective applications after high-payoff core competencies. Authoritatively optimize collaborative benefits for error-free communities.</p>

                  <br /><br />

                  <div class="flexbox flex-grow-all gap-items-3">
                    <div>
                      <p><i class="fa fa-tv text-warning fs-30" /></p>
                      <h5>Productivity</h5>
                      <p>Appropriately communicate frictionless schemas rather than magnetic process improvements.</p>
                    </div>

                    <div>
                      <p><i class="fa fa-code text-danger fs-30" /></p>
                      <h5>Synchronize</h5>
                      <p>Appropriately communicate frictionless schemas rather than magnetic process improvements.</p>
                    </div> 
                  </div>

                </div>
              </div>
              <!-- End of modified slide-->

            </div>
            <div class="swiper-slide"><img src="assets/img/bg-man.jpg" alt="..." /></div>
            <div class="swiper-slide"><img src="assets/img/bg-cup.jpg" alt="..." /></div>
          </div>

          <div class="swiper-button-prev" />
          <div class="swiper-button-next" />
          <div class="swiper-pagination" />
        </div>
      </div>
    </div>

  </div>

</section>

Hi,

thanks for your very helpful comments. However, now the swiper buttons are again indented. I want them to be the only element located at the outer edges of the page. Is this doable?

Best regards, Michael

Hi,

I’m not sure if I get you right, but the other variations of buttons are:
- Replace swiper-button-box with swiper-button-circular
- Remove swiper-button-box

Please check if you like any of these types.

Hi,

sorry for being not clear enough. I hope the following schematic image better conveys the layout I want to realize: https://www.dropbox.com/s/xgn539zmrfbn2ra/Screen%20Shot%202017-08-01%20at%2020.18.51.png?dl=0

Best regards, Michael

Hi,

I didn’t expect that we can accomplish this carousel without making changes in CSS or JS files, but it’s possible! Check this code: https://pastebin.com/5qs5xgMs

Cheers.

Hi,

great, thank you very much. That looks almost perfect now. I hope I do not seem too pedantic, but isn’t the swiper content still several pixels wider than the content of the topbar?

Furthermore, I tried to include in the swiper the following slide down/up effect: http://jsfiddle.net/amosrivera/AYWku/1/ For that purpose, I put the CSS under a <style> tag in the page’s <head> and the Javascript into your provided “script.js” file. Unfortunately, the slider vanishes as soon as the site is loaded. As you may have guessed, I’m a complete newbie to web design (I’m an astrophysicist by profession). Maybe you could give me some hints about how to solve this problem so that I’m able to figure out similar issues by myself in the future.

Thank you in advance for your help! Best regards, Michael

Hi,

To fix the sizing issue, add the following code to /assets/css/style.css file:

.swiper-container .container {
  box-sizing: border-box;
}

For the second issue, use following JS code:

$('#myButton').on( 'click', function() {
  if ( $('#content').is(':visible') ) {
    $(this).html( 'Slide down ↓' );
  }
  else {
    $(this).html( 'Slide up ↑' );
  }
  $('#content').slideToggle();
});

Good luck.

Hi,

thank you very much for solving the sizing issue. Looks perfect now!

Concerning the JS code: The slide button switches on click, yet no content appears

Best regards, Michael

Hi,

Could you please bring it online to see your code? It works fine for me.

Hi,

you’re right. It is working everywhere else than inside the swiper. Maybe there is some sort of interference. Here is my swiper code (with the thing included):

<section class="section" id="section-teaching">
  <div class="container-wide">
    <header class="section-header">
      <h2>Teaching</h2>
      <br />
      <p class="lead">Below you can swipe through the courses I have been teaching.</p>
    </header>
    <div class="swiper-container swiper-button-box" data-space-between="20">
      <div class="swiper-wrapper">

        <!-- First slide--> 
        <div class="swiper-slide">
          <div class="container">

            <div class="row">
              <div class="col-12 col-md-4 text-center">
                <img class="mr-40" src="assets/img/afm_icon.png" alt="..." width="320" />
              </div>
              <div class="col-12 col-md-8 align-self-center pb-70">
                <small>Graduate course</small>
                <h4>Astrophysical fluid mechanics</h4>
                <p>Course description</p>

                <!-- Not working part-->
                <div id="content">
                  bla bla bla bla bla bla bla bla blabla bla blabla bla bla
                </div>
                <span id="myButton">Slide down ↓</span>  
                <!-- End of not working part-->

              </div>
            </div>  
          </div>
        </div>
        <!-- End of first slide--> 

        <!-- Second slide-->
        <div class="swiper-slide">
          <div class="container">
            <img src="assets/img/bg-cup.jpg" alt="..." />
          </div>
        </div>
        <!-- End of first slide-->

      </div>
      <div class="swiper-button-prev" />
      <div class="swiper-button-next" />
      <div class="swiper-pagination" />
    </div>

  </div>
</section>

I’ve appended the CSS

#content{
    display:none;
}

#myButton{
    color:#248;
    padding:3px;
    cursor:pointer;
}

to “style.css” and placed your JS code under a <script> tag at the bottom of the HTML file.

Hopefully you can find something.

Best regards, Michael

Hi,

It works fine here. Probably you have JS error in somewhere. Also, note that you have to paste the Javascript code inside script.js and bellow “Custom Javascript code” section, before “});”.

Hi,

I think I’ve found the reason why it wasn’t working: I had on my site two of those vertical sliders, one on each slide of the horizontal swiper. Should I use in this case different IDs or can I assign some sort of numeric index to the elements to make them unique?

Does the vertical slider also stops working for you if the right horizontal swiper button is pressed twice, i.e., if you return to the first slide.

By the way: I don’t use any other custom JS.

Best regards, Michael

Hi,

It’s hard to tell. If you provide online demo, it’s more convenient to inspect your page and find the problem.

If you have two slide-down components (i.e. #content element), you should use foreach in your JS code or give them different IDs (i.e. #content1 and #content2) and duplicate your JS code and modify it based on the html code change. It should be the problem I guess.

Regards.

Hi,

understood. I’ve put the site online now: http://www-astro.physik.tu-berlin.de/~schulreich/

Currently, the two implemented vertical sliders (“Details for summer term …”) doesn’t really work well with the horizontal swiper. It would be fantastic, if you could find the reason.

Best regards, Michael

Hi,

Maybe the problem is that Swiper create your content dynamically. Could you replace your JS code with following:

$(document).on( 'click', '#SliderButton1', function() {
  if ( $('#SliderContent1').is(':visible') ) {
    $(this).html( 'Details for summer term 2017 <i class="fa fa-chevron-down fs-9 pl-5" />' );
  }
  else {
    $(this).html( 'Details for summer term 2017 <i class="fa fa-chevron-up fs-9 pl-5" />' );
  }
  $('#SliderContent1').slideToggle();      
});

$(document).on( 'click', '#SliderButton2', function() {
  if ( $('#SliderContent2').is(':visible') ) {
    $(this).html( 'Details for summer term 2016 <i class="fa fa-chevron-down fs-9 pl-5" />' );
  }
  else {
    $(this).html( 'Details for summer term 2016 <i class="fa fa-chevron-up fs-9 pl-5" />' );
  }
  $('#SliderContent2').slideToggle();      
});

Seems this comment tool will change the code. Please copy the code from here: https://pastebin.com/WAJ3bfgP

Hi,

thanks for your effort. I’ve replaced the part in “script.js”, but now the second vertical slider does not display any content when clicked.

Try this one. It works for me: https://pastebin.com/Qksm39Fz

Hi,

thank you so much! Now it’s indeed working.

1) Is there an option for turning off autorun for the horizontal swiper?

2) When I open the second vertical slider “Details for summer term 2016” on my smartphone, the 4th column does not fit completely onto the screen; the word “Announcement” is cut off. Is there a way to correct this or are these simply too many columns?

3) Is there a way to specify which part of the (parallax-)header image is displayed when it is shrunk, e.g., to smartphone screen size? I want to keep the person always visible.

Hi,

You’re welcome.

1) Yes, add data-autoplay="0" to your .swiper-container element.

2) Maybe your best option is to change the flexbox from row to column in small screen devices. So, change:

class="flexbox flex-grow-all gap-items-3"

to:

class="flexbox flex-grow-all gap-items-3 flex-column flex-md-row"

Even, maybe remove gap-items-3 class to fix the spacing issue that you’ll see in small screens.

3) For this one, please send me an email using the contact form in my profile page. I should send you an updated file and instruction.

Hi,

1) I’ve added another vertical slider on the second swiper-slide (http://astro.physik.tu-berlin.de/~schulreich ; section: “Teaching”; slide: “Astrophysical seminar”). Owing to your advice, it displays correctly the content when clicked. When clicked another time, however, it hides the content but doesn’t switch to its original state (the arrow still points upwards). Could there be still some tiny error in “script.js”?

2) Could you give me an advice for how to reduce the whitespace between icon and text and thus to achieve aesthetic alignment in the grey box in the “Contact” section.

3) Can the map be prevented from being scrolled accidentally in desktop browsers (mobile already works fine)?

Best regards, Michael

Hi,

I saw your code. You’ve added “style” and “data-overlay” attributes to .col-12 element, while you should add them to the <section> element.

Let us know if you need any further help.

Hi,

I’m so happy to hear that TheSaaS could save your team few hours in development process.

Probably you’re using an old version of the template. Please download the latest version. You’ll see a .drawer-toggler button in topbar source code and a .drawer div at the end of file (after footer).

Hope it helps.

Could you please describe the problem more precisely? I can’t understand the problem. Would be great if you provide pictures as well.

Hi,

Have you set the receiver email address in /assets/php/sendmail.php ?

Read the second part of this article: http://thethemeio.helpato.com/article/thesaas/getting-started

yes. i changes mail ID and subject.But is is not working.

please see the form code below

<form action=”#” method=”POST”> <input class=”form-control” type=”text” placeholder=”Name”>

 
    <input class="form-control" type="text" placeholder="Company name">
   
</form>

<input class=”form-control” type=”text” placeholder=”Work email”> <input class=”form-control” type=”text” placeholder=”Phone number”>

<button class="btn demo btn-block" type="submit">Schedule Demo</button>

Please set an email from your server and try again, like info@adtechbeta.net .

Our sendmail.php uses internal PHP mail function which also uses the internal server settings for sending email. There’s chances that you’re server didn’t configured for sending emails or its IP address is blocked by gmail, hotmail, yahoo, etc.

I’ve just checked your code! It’s not right. Please take a look at page-contact.html source code. Each input has an ID attribute. The send button also has ID and there’s some alerts for feedback. It’s totally fine that your contact form doesn’t work.

as i see in the form, the form action is # . name attribute is also missing from every input field. I thought the from is submitting from any js coeds. So i viewed script.js also.But there is no any code for form or mail in script.js .From where you are receiving input field data from form and posting it to sendmail.php

Those codes are inside thesaas.js, line 514

I viewed thesaas.js code. There you are receiving the values with the help of ID’s like #contact-send ,#contact-name ,#contact-email .But in the form you didn’t given ID to any form fields. Can you please send proper form.

The JS code is also incorrect. You have designed form for NAME COMPANYNAME WORK MAIL AND PHONE NUMBER. But you are receiving data for contact-name contact-email and contact-message in js file.

You started creating your contact form from a wrong form. I guess you started from the form inside page-demo.html, you should have started from page-contact.html. Check the form code inside page-contact.html

I want page-demo.html form only. for this what i have to do

If you have added a form in any page then it should work. Why page-demo.html page form is not working.

This form doesn’t have server-side support right now. We leave it to application developers to handle it, like login and register forms. Since these kind of forms could have different inputs based on the application usage. We try to find a generic way to provide support for different kind of forms in the next version.

Meanwhile, you can create a mailsender file in your webapp to handle requests which send from this form.

so why you have added this form if it is not working. if i have to do these things from my side only so why should is purchased this template. Send me proper form code, and js code so that i can replace it. Its urgent

i am waiting for your reply

We’ll work on it and let you know when the update was available.

How much time it will take

Probably about 24 hours.

The update is ready. Email us to receive it: https://themeforest.net/user/thethemeio#contact

ok. i am sending an email. send there

i didn’t get any email yet.please send me asap. my website is live but form is not working