wipeoutmedia

Hi smurv,

Thanks for your message.
I personally really like this script, so I decided to get it working on my Wipeout Media website: https://wipeoutmedia.com/cool-carousel

The steps I did to make this happen are:
1) Create a new block titled: Cool Carousel – JS
2) Open in a text editor and copy and paste the contents of jquery.carouFredSel-6.1.0-packed.js into the new code block
3) Place <script type="text/javascript"> before the above script and </script> after it.
4) Click Save to save the code block
5) Create a new block titled: Cool Carousel – JS & CSS
6) Open in a text editor and copy and paste a select section of the coolcarousel.html file into the new code block
7) The selected code I grabbed was:

<script type="text/javascript">
    $(function () {
        $('.carousel').each(function () {
            var $cfs = $(this);
            $cfs.carouFredSel({
                direction: 'up',
                circular: false,
                infinite: false,
                align: false,
                width: 275,
                height: 290,
                items: 1,
                auto: false,
                scroll: {
                    queue: 'last'
                }
            });
            $cfs.hover(

            function () {
                $cfs.trigger('next');
            },

            function () {
                $cfs.trigger('prev');
            });
        });
    });
</script>

<style type="text/css">
    html, body {
        height: 100%;
        padding: 0;
        margin: 0;
    }
    body {
        min-height: 600px;
    }
    body * {
        font-family: Arial, Geneva, SunSans-Regular, sans-serif;
        font-size: 14px;
        color: #333;
        line-height: 22px;
    }
    #wrapper {
        _BREAK_width: 830px;
        _BREAK_height: 500px;
        _BREAK_margin: -290px 0 0 -415px;
        _BREAK_position: absolute;

        overflow: hidden;
        left: 50%;
        top: 50%;
    }
    #wrapper * {
        color: #ccc;
    }
    #wrapper .carousel {
        display: block;
        float: left;
        width: 275px;
        height: 290px;
        margin: 0 1px 1px 0;
    }
    #wrapper .carousel img {
        display: block;
    }
    #wrapper .carousel div {
        background-color: black;
        width: 215px;
        height: 290px;
        padding: 0 30px;
    }
    #wrapper .carousel div h3 {
        font-size: 20px;
        line-height: 50px;
        height: 50px;
        margin: 0;
        padding: 0;
    }
    #wrapper .carousel div p {
        height: 160px;
        margin: 0;
    }
</style>

NOTE: In order for the JavaScript and CSS code to work with WordPress pages and posts, you will notice I have typed _BREAK_ to break the CSS rules for #wrapper
8) Click Save to save the code block
NOTE: You may have to change the image sizing values to correspond to your image sizes you wish to use. For my images I increased all the heights to 290px. You can always play with these values to see what works best.
9) Select the checkbox for the Pages/Posts/Categories that you want these scripts to work with. You can also use URLs if you like.
10) Again, click Save after making changes
11) Go to your WordPress page that you want your image carousel to appear in.
12) Click the HTML editor, and paste something like this:

<div id="wrapper">

   <div class="carousel"><img src="https://wipeoutmedia.com/wp-content/uploads/2011/09/css-js-toolbox-v6-page-logo.png" alt="logo" width="245" height="230" />
      <div>
         <h3>Sbarro TwoFort100</h3>
            The new Swiss Sbarro TwoFort100 Concept car is shown during the press day at the 81st Geneva International Motor Show in Geneva, Switzerland, on 01 March 2011.

      </div>
   </div>
</div>

NOTE: you can always create more boxes by adding additional:

<div class="carousel"><img src="https://wipeoutmedia.com/wp-content/uploads/2011/09/css-js-toolbox-v6-page-logo.png" alt="logo" width="245" height="230" />
    <div>
         <h3>Sbarro TwoFort100</h3>
            The new Swiss Sbarro TwoFort100 Concept car is shown during the press day at the 81st Geneva International Motor Show in Geneva, Switzerland, on 01 March 2011.

    </div>
</div>

NOTE: Shown is my image, which is stored in the WordPress media uploads section. You of course would need to upload your own media and copy and paste the link for that. Take note of the image size too as you would need to consider these values.
I actually found that the width was perfect, I only had to adjust the height values.
Lastly, you would need to change the text for the title and paragraphs to whatever you wish to display.
13) Click Publish and View. Hopefully it all works!!!

Kind Regards,
Damo

Hey Simon,

Thanks for your message and letting us know about this issue.
There could be some conflict of interest going on with Better WordPress Security and our CJT plugin. I will look into this for you when I get a chance and let you know.

On a similar note, we are going to be updating the CJT plugin in the near future, and any issues such as these will be fixed.

Kind Regards,
Damo

Hello again natostanco,

Since we don’t touch the user data, you should be able to write whatever you like, although just to make sure, we will investigate this further.

In the meantime, maybe change the drop-down hook selector to ‘Footer’ and see how that goes.

Regards,
Damian

Hello natostanco,

Thanks for your question and sorry for the delay in getting back to you. Unfortunately at this stage we do not support the assignments for child pages when selecting the parent page. However, we are going to release this functionality in our CSS & JavaScript V6 edition.

Since it is a core feature that should be included in the free community version of CJT, we will consider incorporating this functionality soon in an update.

Kind Regards,
Damian

Hi Frederick,

I apologise for the delay in getting back to you, I have been very busy on a number of other projects.

I thoroughly appreciate you taking the time to solve the issue yourself and then write down your findings and code fix on here. I will keep this issue in mind when I release the next version. Thanks very much. ??

Regards,
Damian

Hi Mary,

I have created a post to assist you further. I thought it was a great little JavaScript function to include in my blog so I thank you for taking the time to write a comment.
Please visit the blog page here: Confirmation Alert Box with Cookie

Let me know if you are having issues.

Kind Regards,
Damian

Hi incomeology,

Yes, this feature is definitely on the ‘to-do’ list, which I hope to include in a future release. Thanks again for your feedback and feature request.
Regards,
Damian

Hi Mary,

Thanks for your comment and I am very sorry for the delay in getting back to you.
I am happy to look further into this for you and get back to you soon.
In the meantime, feel free to email me any additional info such as your clients website on: info (at) wipeoutmedia.com and I can take a look.

Kind Regards,
Damian

Hi Myatu,

Sorry for the delay in getting back to you.
I have since downloaded version: 1.1.6.1 and all is fine.

Thanks very much for your prompt fix, it’s much appreciated.

Kind Regards,
Damian

Hi Camu,

You were right. I ticked the checkbox ‘Ignore Prefetch’ in the Filters section of SlimStat and it is no longer recording duplicate requests.

Thanks very much for your time and super fast response.
Your plugin rocks … Donating now. ??

Regards,
Damian

Hi Camu,

Thanks very much for getting back to me so quick. Yes, I understand what you are saying. You know it is really strange because it seems to be happening for every page request.

Yes I would really appreciate if you could take a quick look. Is it possible to email me admin at teacherscompanion.com and I can provide temporary login details.

Happy to post the findings in this post.

Kind Regards,
Damian

Hi incomeology,

Thanks very much for your comment.
This is certainly a great idea, and one that we will be incorporating in a future update.

Much appreciated,
Damo

Hi jt512 and artychan,

These are certainly strange issues that may be due to a number of factors such as theme clashing issues, server configuration and performance issues. We are currently working on a number of major improvements and optimisations for the next version, although a version release is still some time away. That said, we can let you know once we are closer to releasing it.

Regards,
Damo

Hi Simon,

Thanks for your question. There are a number of techniques that you can implement, which can provide support for mobile devices.

1) Use @media queries (CSS3) to detect things like:
– width and height (of the browser window)
– device width and height
– orientation – for example is the phone in landscape or portrait mode?
– resolution

An example for detecting the iPhone can be represented with the following code:

@media only screen and (max-device-width: 480px) {
       /*    CSS overrides go here   */
}

You can also reference an external stylesheet:
<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="small-device.css" />

ProtoFluid code (shown below) is handy to use if you are concerned the user has a normal desktop browser but using a very tiny window.

@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
       /*    CSS overrides go here   */
}

To make sure that your website loads zoomed in on your phone-friendly layout rather than zooming out, you would also need to put this code near the top of your header.php file:
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

2) Use JavaScript code to detect if it is a mobile device and then redirect the user to the ‘mobile’ version of the website.

A script you could use written by the talented Michael Nilsson is shown below.

<script type="text/javascript">

var mobile = function(){
    return {
        detect:function(){
            var uagent = navigator.userAgent.toLowerCase();
            var list = this.mobiles;
            var ismobile = false;
            for(var d=0;d<list.length;d+=1){
                if(uagent.indexOf(list[d])!=-1){
                    ismobile = true;
                }
            }
            return ismobile;
        },
        mobiles:[
            "midp","240x320","blackberry","netfront","nokia","panasonic",
            "portalmmm","sharp","sie-","sonyericsson","symbian",
            "windows ce","benq","mda","mot-","opera mini",
            "philips","pocket pc","sagem","samsung","sda",
            "sgh-","vodafone","xda","palm","iphone",
            "ipod","ipad","android"
        ]
    };
}();

if(mobile.detect()){
    alert('You are using a mobile phone to view this page..');
}else{
    alert('You are using a desktop browser to view this page..');
}

</script>

3) There are a number of mobile themes, mobile optimisers, and mobile detection plugins – both premium and free, which you may also consider trying.

I have been working on a website called Glow Guides – https://glowguides.com.au and wanted to quickly optimise the website for the iPhone. Anyway, this is the script I used and placed at the bottom of footer.php before the closing body tag, which seemed to work well doing it this way.
<meta name="viewport" content="width=device-width, initial-scale=0.3, maximum-scale=0.5, user-scalable=yes" />

I chose an initial value that I felt looked good on the iPhone, and selected a maximum scale value so when users pinch-zoom it doesn’t zoom in too far. Also, you must declare user-scalable=yes for the pinch zoom to work.

Regards,
Damo

Hi artychan,
I appreciate your feedback and sorry you are having issues.
Yes, this can happen if you do not wrap your CSS code within a CSS declaration. In other words, if you were to only put plain text without declarations or code tags in a code block and save it, the plain text will appear in your webpage.

Click on Wipeout Media to see the comment mentioning the CSS declaration.

Thanks,
Damo