JavaScript and jQuery

Teaser Slider

22nd March 2018 JavaScript and jQuery 6 comments

I have been looking for a while for a teaser slide the could do the following:

  1. Simple slider functionality.
  2. An option to tease for the next slide by small image within each slide.

All I found are normal slides that display a part of next slide. But what if I need to just promote with a small image, that not a must to be a part of next slide, while it’s like an Ad for it only.

That’s why I made this slider from scratch.

Here’s the Git Repository:

Teaser Slider Repository

Here’s the one page code, and your images should be inside ‘slides’ folder or whatever you want 😉

<!DOCTYPE html>
<html>
<head>
    <title>CairoCode Slider</title>
    <style>
        /*-CairoCoder Slide-*/
        .cc-wrapper {
            width: 960px;
            max-height: 495px;
            overflow: hidden;
            position: relative;
        }
        .cc-slide {
            display: none;
        }
        .cc-slide.cc-active {
            display: block;
        }
        .slide {
            width: 100%;
            float: left;
            height: auto;
        }
        .teaser {
            float: left;
            max-height: 100%;
            position: absolute;
            top: 0;
            right: -15%;
            opacity: 0.8;
            cursor: pointer;
            border-radius: 5px 0 0 5px;
            transition-timing-function: ease-in;
            transition: 0.25s;
        }
        .teaser:hover {
            right: 0;
            opacity: 1;
            transition-timing-function: ease-out;
            transition: 0.25s;
        }
    </style>
</head>
<body>
<div class="cc-slider">
    <ul class="cc-wrapper">
        <li class="cc-slide cc-active">
            <img class="slide" src="slides/slide1.png" alt="slide1">
            <img class="teaser" src="slides/teaser1.png" alt="teaser1">
        </li>
        <li class="cc-slide">
            <img class="slide" src="slides/slide2.png" alt="slide2">
            <img class="teaser" src="slides/teaser2.png" alt="teaser2">
        </li>
    </ul>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
        crossorigin="anonymous"></script>
<script>
    $('.teaser').click(function () {
        var next = $(this).parent().next('.cc-slide');
        $(this).parent().hide();
        if (next.length > 0) {
            next.show();
        } else {
            $('.cc-slide').hide().first().show();
        }
    });
</script>
</body>
</html>

Prevent CSS and JavaScript files caching !

4th September 2016 JavaScript and jQuery No comments

Simple Client-side Technique

In general, caching is good.. So there are a couple of techniques, depending on whether you’re fixing the problem for yourself as you develop a website, or whether you’re trying to control cache in a production environment.

General visitors to your website won’t have the same experience that you’re having when you’re developing the site. Since the average visitor comes to the site less frequently (maybe only a few times each month, unless you’re a Google or hi5 Networks), then they are less likely to have your files in cache, and that may be enough. If you want to force a new version into the browser, you can always add a query string to the request, and bump up the version number when you make major changes:

<script src="/myJavascript.js?version=4"></script>

This will ensure that everyone gets the new file. It works because the browser looks at the URL of the file to determine whether it has a copy in cache. If your server isn’t set up to do anything with the query string, it will be ignored, but the name will look like a new file to the browser.

On the other hand, if you’re developing a website, you don’t want to change the version number every time you save a change to your development version. That would be tedious.

So while you’re developing your site, a good trick would be to automatically generate a query string parameter:

<!-- Development version: -->
<script>document.write('<script src="/myJavascript.js?dev=' + Math.floor(Math.random() * 100) + '"\><\/script>');</script>

Adding a query string to the request is a good way to version a resource, but for a simple website this may be unnecessary. And remember, caching is a good thing.

It’s also worth noting that the browser isn’t necessarily stingy about keeping files in cache. Browsers have policies for this sort of thing, and they are usually playing by the rules laid down in the HTTP specification. When a browser makes a request to a server, part of the response is an EXPIRES header.. a date which tells the browser how long it should be kept in cache. The next time the browser comes across a request for the same file, it sees that it has a copy in cache and looks to the EXPIRES date to decide whether it should be used.

So believe it or not, it’s actually your server that is making that browser cache so persistent. You could adjust your server settings and change the EXPIRES headers, but the little technique I’ve written above is probably a much simpler way for you to go about it. Since caching is good, you usually want to set that date far into the future (a “Far-future Expires Header”), and use the technique described above to force a change.

If you’re interested in more info on HTTP or how these requests are made, a good book is “High Performance Web Sites” by Steve Souders. It’s a very good introduction to the subject.

Another useful article:

Can We Prevent CSS Caching?

Get the “text” of the selected “option” using PHP and JavaScript

19th August 2016 JavaScript and jQuery, PHP No comments

This is not something that can be done through PHP alone. The PHP script can only “see” the information which is posted (the value for the selected option that is posted). You can use javascript to alter a hidden input field with the text contents of a selected option, and this will be included in the $_POST array:

<form  action="test.php"  method="POST">  
    <select id="test" onchange="document.getElementById('text_content').value=this.options[this.selectedIndex].text">
     <option value="1">Test One</option>
     <option value="2">Test Two</option>
    </select>

<input type="hidden" name="test_text" id="text_content" value="" />
</form>

 

This will make the $_POST['test_text'] available with the selected index (but you should also force the onchange() function when the page loads so that it will be populated even if the user leaves the select field at the default value.

How to trigger jQuery ‘autocomplete’ manually on ‘keyup’ event

11th July 2016 JavaScript and jQuery No comments

Here, Try doing it like this :

var availableTags = [
  "Perl",
  "PHP",
  "Python",
  "Ruby"
];
$('input#mainSearchBox').autocomplete({
  source: availableTags,
  minLength: 0
});

$('input#mainSearchBox').autocomplete("disable");

$('input#mainSearchBox').keyup(function() {
  var value = $('input#mainSearchBox').val();
  var last = value.substr(value.length - 1);
  if (last == "*") {
    var valToSearch = value.substr(0, value.length - 1);
    $('input#mainSearchBox').autocomplete("enable");
    $('input#mainSearchBox').autocomplete("search", valToSearch);
  } else {
    $('input#mainSearchBox').autocomplete("disable");
  }
});


<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<input type="text" name="test" id="mainSearchBox">

References :

Have a look at :

  1. http://api.jqueryui.com/autocomplete/#method-search
  2. http://api.jqueryui.com/autocomplete/#method-enable
  3. http://api.jqueryui.com/autocomplete/#method-disable

What I have done :

  1. Loaded/Initialized autocomplete on the textbox and then disabled it.
  2. Whenever key-up event is triggered, I checked if last character in the input is *,

a. if it is, then enable autocomplete and force search on the text-box, with the input value without *.
b. If it is not, then disable the autocomplete.