August 31, 2012

jquery slide out from record

Question by Matthew

I am looking for some advice on an idea which i am unsure if i can do it or not…

i am loading records out of a database and listing them in individual divs and adding an id number from the databse to the divs,the divs are about 100px wide and right across the screen..

i am wondering if i can use some kinda of plugin by jquery so that if i click on the record a tab would slide out from the right hand side with more data on that individual record from the database.. and then i could close it and it would side back so i can only see the records again..

i have had a bit of a look at the jquery ui page with all the demos but i didnt really find anything…

any help or pointers would be great.. even if u know of something simllar ill be happy to look into it…

thanks in advance for any help

Answer by ComputerArts

Ok so here’s my fiddle

HTML (standard containers, etc)

<div id="container">
    <div id="buttons-container"></div>
    <div id="record">
        <div id="record-content"></div>            
        <a href="#" id="bt-close" onclick="closeRecord(); return false;">Close</a></div>
</div>

CSS

a.bt-record {
    display:block;
    width:100px;
    height:100px;
    background:#999999;
    color:#000;
    line-height:100px;
    text-align:center;
    float:left;
    margin:0 10px 10px 0;
    text-decoration:none;
}

a { color:#fff; }

#container {
    width:100%;
    height:100%;
    overflow:hidden;
    position:relative;
}

#record {
    position:absolute;
    right:-240px;
    top:100px;
    width:200px;
    height:200px;
    background:#000;
    padding:20px;
    color:#fff;
    z-index:1;
}

Javascript

//your data in a array of objects (could be something else)
var data = {
    1 : {name:'Record 1', text:'This is the text 1', options:'Anything 1'},
    2 : {name:'Record 2', text:'This is the text 2', options:'Anything 2'},
    3 : {name:'Record 3', text:'This is the text 3', options:'Anything 3'},
    4 : {name:'Record 4', text:'This is the text 4', options:'Anything 4'},
    5 : {name:'Record 5', text:'This is the text 5', options:'Anything 5'},
    6 : {name:'Record 6', text:'This is the text 6', options:'Anything 6'},
    7 : {name:'Record 7', text:'This is the text 7', options:'Anything 7'},
    8 : {name:'Record 8', text:'This is the text 8', options:'Anything 8'},
    9 : {name:'Record 9', text:'This is the text 9', options:'Anything 9'}
};

$(document).ready(function() {
    populateEntries();        
});

//dynamically populate the entries
function populateEntries() {
    for (entry in data){
console.log(entry);       
        $('#buttons-container').append('<a class="bt-record" href="#" onclick="showRecord(' + entry + '); return false;">' + data[entry].name + '</a>');
    }
}

//show the record
function showRecord(id) {
    //create the html
    var html = '';
    html += '<p>Name : ' + data[id].name + '</p>';
    html += '<p>Text : ' + data[id].text + '</p>';
    html += '<p>Name : ' + data[id].options + '</p>';
    $('#record-content').html(html);
    $('#record').animate({right:0}, 500);
}

function closeRecord() {
    $('#record').animate({right:-240}, 500);
}

In this example, I populate the records dynamically, but if you want a SEO friendly way of doing it, you can create the HTML in the page directly. Let me know if you have questions.

Answer by Starx

Sure, let me show you a simple example. It is rather very easy

<table>
    <tr class="recordrow" id="row-1"> <!-- row-X will be the unique way to identify the row -->
       <td>...</td> <!-- The record field -->
       <td>...</td>
       ....
    </tr>
</table>

<!-- Now we create the details Div, but as reference to the `row-X` -->
<div class="details" id="details-1">
   ... More details of the records
</div>

then a simple jQuery snippet like this will get the job done:

$(".recordrow").click(function() {
    var divid = "details-" + $(this).attr('id').split("-")[1]; //Create the id of the div
    $("#"+divid).show().animate({ "left": '200px'}); //Bring the div from right to left with 200px padding from the screen
});

Demo

April 16, 2012

jquery div slider when postback div close

Question by saadan

I have a jquery slider that open and close my div. but when the page get a postback the div is closed.
and i want the div to stay open.

my slider

 if ($(".div").is(":hidden")) {
            $(".div").slideDown(1000); // slide it down

        } else {
            $(".div").slideUp(1000); // hide it
        }

I thought about change the address, such as

website.com#open

and then check the adress
but how can i do this ?

Answer by Starx

When the page postbacks, the markup reverts to the original state. So, $(".div").is(":hidden") will always return true.

You can create some sort of state identifier and use that to check the state.

March 16, 2012

nivo slider – add text to the slider

Question by oliverbj

I am currently using the nivo slider on my homepage, to show different images. It works perfectly. Although, next to the images there are some text, which I would like to follow each picture.

Here is the HTML code:

     <!-- Splash -->
            <div class="splash">
              <div class="splash-content">
<div id="text1">                
<h1>More traffic to your website</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elitectetur adipis. In ultrices malesuada est eu laoreet. Nullam eget tellus ac lacus bibendum egestas et at libero. Vestibulum commodo magna ut suscipit.</p>
</div>                
              </div>

            <div id="slider" class="nivoSlider nivo-right theme-default">
                <img src="images/splash.png" alt="" title="" />
                <img src="images/splash.png" alt="" title="" />
                <img src="images/splash.png" alt="" title="" />
                <img src="images/splash.png" alt="" title="" />

            </div>


        </div><!-- End Splash -->

As you can see in the HTML code, there is the <div id="slider">, which is the nivo slider. Although, I wish to have the <div id="text1"> to follow each picture. Then have a <div id="#text2"> to follow the next image and so on.

The jQuery code to control the nivo slider:

<script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider({
        effect: 'sliceUp', // Specify sets like: 'fold,fade,sliceDown'
    });
});
</script> 

Thanks in advance.

Answer by Starx

Use title attribute in the <img /> to define text to appear as caption in the slider.


Lets see an example:

<div id="slider" class="nivoSlider">
    <img src="images/slide1.jpg" alt="" />
    <img src="images/slide2.jpg" alt="" title="#htmlcaption" />
                                             <!-- ^ This is one way to bring caption -->
    <img src="images/slide3.jpg" alt="" title="This is an example of a caption" />
                                             <!-- ^ This is ANOTHER way -->
</div>

<!-- This part of caption is called from the second image link above see  `#htmlcaption` there -->
<div id="htmlcaption" class="nivo-html-caption">
    <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
</div>

Update

Without hacking the code, you can override the default class to appear as a separate text box.

Find .nivo-caption style and make some changes to it

.nivo-caption { 
       width: 200px; 
       height: 250px; 
       left: -200px; /* same as the width */
 }

Update 2

Here is a demo with your slider working with the workaround i mentioned.

SO far as this question goes, this is where i stop. Hope it helps.

June 14, 2010

How to use jquery ui slider to create a pagination effect and load the content in a <DIV>?

Question by user366106

I want to create a pagination script using jquery UI’s slider widget. So far I have got the slider working but I dont know how to send request to the server to fetch new content.

So far this is my HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>jQuery UI Slider - Range slider</title>
    <link type="text/css" href="themes/base/jquery.ui.all.css" rel="stylesheet" />
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="jquery.ui.core.js"></script>
    <script type="text/javascript" src="jquery.ui.widget.js"></script>
    <script type="text/javascript" src="jquery.ui.mouse.js"></script>
    <script type="text/javascript" src="jquery.ui.slider.js"></script>      
    <style type="text/css">
        body { padding:5em; }
    </style>
    <script type="text/javascript">
    $(function() {
        $("#slider-range").slider({
            min: 1,
            max: 14,
            values: [1],
            slide: function(event, ui) {
                $(".values").html(ui.values[0];);
            }
        });
    });
    </script>
</head>
<body>
<div class="values" style="padding:2em;"></div>
<div id="slider-range"></div>

<div class="info" style="margin-top:2em; background:#CCC;padding:2em;">
Here is where the content will be displayed.
</div>

</body>

Thanks in Advance

Answer by Starx

Well, You can send a request at the slide event of your slider to send a request to the server at put the fetched data inside a div

  $("#slider-range").slider({
   min: 1,
   max: 14,
   values: [1],
   slide: function(event, ui) {
    var newPage = ui.values[0];
    $(".info").load("content.php", { page: newPage });
                                //load the content into a division
   }
  });

UPDATED
a sample of content.php

<?
     $recordsperpage = 15;
     if(!isset($_POST['page'] or empty($_POST['page']) { $page =1 ; }
     else { $page = $_POST['page']; }

     $limit = $page * $recordsperpage.",".$recordsperpage;
     $query = "SELECT * FROM yourtable LIMIT ".$limit;
     $result = mysql_query($query) or die(mysql_error());
     while($row = mysql_fetch_array($result)) {
          //Display the records in your pattern
     }
?>
?>
...

Please fill the form - I will response as fast as I can!