...

Hi! I’m Starx

experienced Software Developer. And this is my blog
Start Reading About me
Blog Page
March 19, 2012

getting the value of array key in codeigniter

Question by Zoran

I have the following line in my controller:

$data['faq'] = $this->faqModel->get();  

This data print the following using the print_r

    Array
(
[faq] => Array
    (
        [0] => Array
            (
                [faqid] => 12
                [catid] => 122
                [question] => How this CMS works
                [question_en] => How this CMS works
                [answer] => How this CMS works?
                [answer_en] => How this CMS works?

                [sorder] => 2
                [visible] => 1
            )

        [1] => Array
            (
                [faqid] => 8
                [catid] => 121
                [question] => How does the design cost?
                [question_en] => How does the design cost?
                [answer] => How does the design cost?

                [answer_en] => How does the design cost?

                [sorder] => 1
                [visible] => 1
            )

    )

)

I want to use the value stored in the [catid] key, and I am trying to do something like:
$data[‘faq’][‘catid’] to get that value in the controller (I want to make another select with that value) But I am getting with this error message: Undefined index: catid

Anyone can help me to get the value of [‘catid’]???

Regards, Zoran

Answer by safarov

Its 3 dimensional array u look closely there is two elements in faq array. You must wrote something like this: $data['faq'][0]['catid'] or $data['faq'][1]['catid']

Answer by Starx

The way you are accessing the array is incorrect, you are missing the item index on the second level. The correct way to use it as you are doing would be to do

echo $data['faq'][0]['faqid']; //faqid of the first item

However, this will only show one faqid at a time, and it not so useful when you are iterating. So, a good way would be this way.

foreach($data['faq'] as $value) {
 echo $value['faqid'];
}
Read more

fire keyPressEvent in tinyMce

Question by MartinM

I’m customizing tinyMCE in Moodle (e-learning). I’ve added a toolbar button which sets focus into a text area and adds two dollar signs in it.
What I need is to place cursor between those signs, so that user can start typing between them.
Probably the best approach is just to press left arrow programaticlly, isn’t it? But I can’t figure out how to do that.
Here is the code:

tinyMCE.init({
mode : "textareas",
theme : "advanced",
theme_advanced_buttons1 : "mybutton,bold,italic,underline,separator,strikethrough,justifyleft,justifycenter,justifyright, justifyfull,bullist,numlist,undo,redo,link,unlink",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
plugins : 'inlinepopups',
setup : function(ed) {
    // Add a custom button
    ed.addButton('mybutton', {
        title : 'My button',
        image : 'img/example.gif',
        onclick : function() {
            ed.focus();
            ed.selection.setContent('$$');
        }
    });
}

});
Thanks

Answer by Thariama

This should do what you desire:

ed.addButton('mybutton', {
    title : 'My button',
    image : 'img/example.gif',
    onclick : function() {  
        ed.focus();
        ed.selection.setContent('$<span id="my_marker">u200b</span>$');
        var $marker = $(ed.getBody()).find('#my_marker');
        ed.selection.select($marker.get(0));
        $marker.remove();
    }
});

Answer by Starx

You can fire a keypress event using the following snippet.

var e = jQuery.Event('keypress');
e.keyCode = 37; //Left arrow keycode 
$(document).trigger(e);

Usage might be something like

onclick : function() {
    ed.focus();
    ed.selection.setContent('$$');
    var e = jQuery.Event('keypress');
    e.keyCode = 37; //Left arrow keycode 
    $(document).trigger(e);
}
Read more

Is there a way to check whether the html is loaded on Iframe

Question by AmGates

My problem is that I have two html files for example say 1.html and 2.html. The contents of the files are
1.html
It consists of the Iframe. The source of the Iframe is 2.html.
2.html
It is a sample html page.

My question is that I want to check whether the 2.html is loaded on an Iframe or loaded on a separate browser directly without putting it inside an Iframe. The checking has to be done from 2.html only.

Any suggestions friends.
Thanks in advance.

Answer by Sepehr

when loaded in iframe the window.parent points to the parent window, however when loaded in a separate window window.parent points to window itself:

var loadinInIframe = window.parent != window;

Answer by Starx

Bind a function inside the iframe’s onload event and set a loaded variable on the parent page

On the iframe

window.onload = function() {
   parent.iframeLoaded = true;
}

On the parent page, just declare the variable to hold the value

var iframeLoaded = false;

Now you can check this var when you need from the parent page like

if(iframeLoaded) {
    // Do something
}
Read more

How to center an input[type=text] while leaving all the other elements uncenterred?

Question by Snowflake

I have another small problem with centering elements. I thought about the previous questions that I’ve asked, but I can’t seem to find the answer on this problem. I have the following example code to demonstrate my problem.

<div id="main" style="width: 960px;">
    <form>
        <label>Test</label>
        <input type="text" value="Test" id="inputfield" />
    </form>
    ....
</div>

Now I tried to treat it as a block-element using width and margin to position it correctly, but somehow it failed. Do I need to use an id field or is it recommanded that I put a div around every input text field (using #main input[type=text]{...})?

Answer by Starx

For this case, the best way would be assigning specific rule as per the id #inputfiled

Add this in the CSS Demo

#inputfield { display: block; margin: 0 auto; }

Relying on attribute selectors like input[type="text"] is very risky in terms of cross-browser compatibility.


Updates

In case you want to center all input elements, but not other, you can use a name selector

input,select,textarea { /* These three elements round up all the input types */
    display: block; 
    margin: 0 auto; 
}
Read more
March 18, 2012

Format and echo datetime string received from MySQL?

Question by pufAmuf

how would I format a datetime string received from MySQL? For example, when I do

echo $info['start_datetime']

I get 2012-03-18 21:00:00, but I would like to Turn it into Sunday, March 18, 2012. I looked at the php documentation where it showed the different formats, but not specifically when they’re retrieved from MySQL.

Thanks everyone!

Answer by Ing

echo date('l, F d, Y', strtotime($info['start_datetime']));

Answer by Starx

There are load of ways you can format the date. First change the time into timestamp using strtotime() function.

Check this page to get the list of how to format a date.

The usage is something like this

$time = strtotime($info['start_datetime']);
echo date("l, F d, Y", $time);
Read more

Internal css doesn't work for me with JS

Question by idish

I am trying to use the following css code in the table I create in JS but it seems that it doesn’t get any of it’s styles and I don’t know why.

So here’s the code:
CSS code:

    <style type = "text/css">
div.team
{
    margin-right:30%;
    }

        .team table

        {

        border-collapse:collapse;

        }

        .team table td

        {

        background-color:#4F5FAC;

        border:2px groove grey;

        }

        .team table th

        {

        font-style:italic;

        background-color:#0B1260;

        padding:0 15px;

        color:white;

        border:2px groove black;

        }

        .team tr td:first-child

        {

        color:yellow;

        font-weight:bold;

        text-align:center;

        }

</style>

JS code:

myWindow=window.open('table.html');
        myWindow.document.write("<table class = 'team'>");
        myWindow.document.write("<tr><td> שם  פרטי: </td><td>" + document.reg.name.value + "</td></tr> <tr><td> שם משפחה: " + document.reg.lname.value + "</td></tr> <tr><td> אימייל: " + document.reg.email.value + "</td></tr> <tr><td> סיסמא: " +document.reg.password.value +"</td></tr>");
        myWindow.document.write("</table>");

Any idea why I don’t get the styles of the table?(it works without the js)
Thanks in advance!

Answer by jfriend00

I see at least four issues:

  1. The CSS rules have to be in the same document that you’re trying to affect. So these CSS rules would need to be in table.html.
  2. If you use document.write() after the document has been loaded which you are doing here, it then clears out the current document (including all style rules you’ve previously included) and starts a new document. So, there is no way for these style rules to be in effect in the table.html file because you’ve cleared out the prior contents of that document. If you want to ADD content to the existing page without destroying it’s current contents and styles, then you need to use DOM insertion API calls like .append() or .insertBefore() or set .innerHTML on an existing DOM object.
  3. Your CSS rules are not specified properly. When you are targeting multiple identifiers on the same tag, you cannot have a space between the identifiers. So, .team table needs to be table.team and .team table th would need to be: table.team th. When you have a space between identifiers as in .team table, that means you want to match a table object with an ancestor of class="team". If you want an object that is both a table and class="team", then you have to not have a space between the two identifiers like this: table.team.
  4. If you want to add content to this new window while keeping the contents of table.html, you will have to wait for it to load (with the onload() event or one of the other DOMReady events) before its contents are ready to be modified and you cannot use document.write().

To solve all this, I would suggest this:

  1. Put all the style rules in an external stylesheet and include them in table.html.
  2. Put the javascript for modifying the page into table.html also.
  3. When you load table.html, add query parameters onto the end of the URL that pass it the values you want to display in that file.
  4. Add javascript to table.html that parses the query parameters to get the data and then, once the DOM is ready in that page, add that relevant content to the page.

This puts style rules in the right file and passes data to the new page while keeping the code for modifying the page within its own page (massively simplifying maintenance going forward).


OK, assuming you don’t need any of the content in table.html, you can create a new window from scratch with this code:

function openMyWindow() {
    var newWin = window.open("", "table");
    newWin.document.write("<div class='team'>");
    newWin.document.write('<table>');
    newWin.document.write("<tr><td> שם  פרטי: </td><td>" + 
        document.reg.name.value + "</td></tr> <tr><td> שם משפחה: " + 
        document.reg.lname.value + "</td></tr> <tr><td> אימייל: " + 
        document.reg.email.value + "</td></tr> <tr><td> סיסמא: " + 
        document.reg.password.value +"</td></tr>");
    newWin.document.write("</table>");
    newWin.document.write("</div>");
    var cssLink = newWin.document.createElement("link") 
    cssLink.href = "iframestylefile.css"; 
    cssLink.rel = "stylesheet"; 
    cssLink.type = "text/css";     
    newWin.document.getElementsByTagName('head')[0].appendChild(cssLink);
}​

You can see this work here: http://jsfiddle.net/jfriend00/VLt8h/. The style rules won’t apply there because the css file doesn’t have the correct full URL.

Answer by Starx

You CANNOT apply style to another page with the CSS of one page.

Upload the CSS to a file, then use the following snippet to load the css onto the opened page.

myWindow=window.open('table.html');
var cssLink = document.createElement("link") 
cssLink.href = "iframestylefile.css"; 
cssLink .rel = "stylesheet"; 
cssLink .type = "text/css"; 
myWindow.document.body.appendChild(cssLink);
// Now carry on writing the elements
Read more

How to change a table row color when clicked and back to what it was originally when another row clicked?

Question by Sinopia

As the title explains, I wish to change the color of a row when it is clicked then revert the color when another is clicked, however still change the color of the newly clicked row.

A resolution in JQuery would be much appreciated. I just can’t crack this one.
What I have so far but it’s not working for me.

function loadjob(jobIDincoming, currentID){
$("#joblistingDetail").load('jobview.php' , {jobID: jobIDincoming}).hide().fadeIn('100');
var last = new Array();
last.push(currentID);
$(last[last.length-1]).closest('tr').css('background-color', 'white');
$(currentID).closest('tr').css('background-color', 'red');};

Answer by Starx

No need to complicate things. This is as simple as possible.

$("table tr").click(function() {
   $("table tr").css("background", "#fff"); //reset to original color
   $(this).css("background", "#fo0"); //apply the new color
});
Read more

Retrieving Image from MySQL with PHP

Question by Dev Newb

I understand the debate over whether to store images in the database but I’m stuck with this design for now. I also know that this topic has been covered a thousand times in terms of pulling the MySQL BLOB into a separate php file for display purposes. My question is a little more narrow and I haven’t seen it anywhere.

I am looping image results from my database into an HTML table that shows the file description and upload date. All I want is the file description hyperlinked so when my users click on it the actual image is displayed. I have this working fine in another script where they choose the image from a dropdown and it POSTS the information to another script. For some reason I am wrapped around the axle on how to display the image from a simple hyperlink. I am trying to do this but it displays all the BLOB data on the page. Can someone point me in the right direction on this one?

while ($row = mysql_fetch_array($answer1)) {
    echo '<tr>';
    echo "<td><input name='checkbox[]' type='checkbox' id='checkbox[]' value='$row[imageven_id]'></td>";
    echo "<td><a href='$row[file_data]')'>$row[upload_name]</a></td>";
    echo "<td>$row[image_category]</td>";
    echo "<td>$row[upload_date]</td>";
    echo '</tr>';
}

Answer by Starx

Storing raw blob data is very complicated if you don’t have image type stored somewhere. I hope you have either fixed the type of image the system accepts or have stored the image type somewhere in the table too.

Any ways, when you showing images using blob data in a browser, you need to know the image type. Create a separate page to show images only. For example create showimage.php. On this page write the following code

$id= abs($_GET['id']);
$query = mysql_query("SELECT file_data FROM imagetable WHERE id='$id'");
$data=mysql_fetch_array($query);

header('Content-type: image/jpg'); //This is where we need to know the image type
echo $data['file_data'];

Now, you can link to this page to show the image, in this way

echo "<a href='showimage.php?id=".$row['id']."'>".$row['upload_name']."</a>";
Read more

trying to put margin around the content div

Question by lostty84

been trying to put margin around content div, but its not working , please help have a look at the html and css is below

<?php require_once("include/session.php");?>
<?php require_once("include/functions.php");?>
<?php include("include/mheader.php");?>
<div id="content">
<h3>
    Registration.
</h3>
<p>
Please read the terms and condition before you register
Simply click on register on the home page, and fill in the registration form.
On submission of the registration form, an email will be sent to the registered email on the form, from which you can activate your account
</p>


</div>
<?php include("include/footer.php");?>

the css is below(was thinking #content {margin:10px 10px 10px 10px;} this should do it , but its not working

body,html {
    margin: 0;
}

#page {
    width: 1060px;
    margin: 0 auto;
    position: relative
    /* is the same as: 
    margin-top: 0;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
 */
}

/* sticky footer */
/*Opera Fix*/
body:before {
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;
}
#outer:after {
    clear:both;
    display:block;
    height:1%;
    content:" ";
}
/* ...#003399;#383838; */
/*
CSS for Reacheasy site
*/
html, body {
    height:100%;
    margin:0;
    padding:0;
    border:none;
background:#cccccc;
}
#outer {
    width:1060px;
    margin:auto;
    min-height:100%;
    margin-top:-52px;
    border-left:1px solid #cccccc;
    border-right:1px solid #cccccc;
background: white url(backgrounds/nav-bg.jpg) repeat-y left top    
}
* html #outer {
    height:100%
}
/*h1,h3 {
    font-size: xx-large;

    text-shadow: 10px 10px 1px grey;

    color: #000;
    padding: 2em 0 .2em .4em;
    margin: 0;

    background: white url(img/header.jpg) repeat-y right;

}*/
ul#nav {
    height: 2em;
    list-style: none;
    margin: 0;
    padding: .2em 0;
    margin:0;
    background:url(img/tabs.gif);
}
ul#nav li {
    /* 
    background: #48f url(img/tabs.gif);
    */
      display : block;
  background-color : #666666;
     float: left;
    margin: 0 1px 0 0;
    padding-left: 10px;
    border-right: 1px solid #A1A1A1;
}
ul#nav a {
    background: url(img/tabs.gif) 100% 0;
    color: white;
    display: block;
    float: left;
    height: 2em;
    line-height: 2em;
    padding-right: 10px;
    text-decoration: none;
}
ul#nav li.current {
    background-color:#666666 ;
    background-position: 0 -60px;
}
ul#nav li.current a {
    background-position: 100% -60px;
    color: #fff;
    font-weight: bold;
}
#content {
margin:10px 10px 10px 10px;

}

this is the header

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Reacheasy - Foremost website for easy reach of things globally</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<link href="members.css" rel="stylesheet" type="text/css"/>  
</head>
  <body>
<div id="outer">
<div id="page">
<div id="header">
<div id="hlogo">
<span style="float:right;"><img src="img/relogo.jpg"  class="logoImage" width="96" height="96"/></span>
</div>
 <span style="font-size:small;text-shadow: 10px 10px 1px grey;"><h1>Reacheasy<span style="font-size:small;"><?php echo $_SESSION['username'];?></span></h1></span>
  <ul id="nav">
    <li class="current"><a href="index.php">Home</a></li>
     <li><a href="women.php">Women</a></li>
     <li><a href="men.php">Men</a></li>
     <li><a href="children.php">Children</a></li>
     <li><a href="homeandappliances.php">Home&amp;Appliances</a></li>
     <li><a href="visionandsound.php">Vision&amp;Sounds</a></li>
      <li><a href="motoring.php">Motoring</a></li>
      <li><a href="homemore.php">More</a></li>
      <li><a href="howto.php">Help(How to?)</a></li>
  </ul>
</div> <!--end of navigation div -->
</div>

the footer

<div id="footer">


&copy; 2012 Reacheasy
<ul id="footlink">
     <li><a href="contact.php">Contact us</a></li>
     <li><a href="termsandcondition.php">Terms&amp;Condition</a></li>
     <li><a href="faq.php">Faq</a></li>
    </ul>

</div>
</body>
</html>

Answer by Starx

IMO, this is a problem caused by unclosed tag. As per your post, your <div id="outer"> is not closed. Try to fix that.


I was right. See this validator result

Line 82, Column 7: end tag for “div” omitted, but OMITTAG NO was
specified

You may have neglected to close an element, or perhaps you meant to
“self-close” an element, that is, ending it with “/>” instead of “>”.


Update: There is no element with id content on the page you linked, so the rule of margin will not be applied until such element exist on the first place.

Read more

resize automatically iframe hieght

Question by adilahmed

i include a iframe in master page and i want to resize iframe height according to its contents inside.

when ever iframe content increase iframe height should be increase.

<div id="div_NotificationOuter" style="position: fixed; bottom: 0px; right: 15px;
            padding: 5px; background-color: White; background-image: url('../images/content_fixed_downup.png');
            background-repeat: no-repeat; min-height: 130px; text-align: left; display: block;
            border: 1px solid gray; width: 280px; overflow: hidden;">

    <asp:ImageButton ID="img1b" runat="server" ImageUrl="../images/close.png" 
                Style="margin-right: 2px;float:right;" OnClientClick="Hide_NotifyPopUp()" />

ALERTS

Your browser does not support iframes.

and iframe page is

<div id="iframe_content">
        <div style="overflow: auto;font-weight:bold " >
            <label id="lblNotifyMessage" runat="server" style="margin-left:15px;">

            </label>
        </div>
        <div style="font-size: 14px;margin-left:15px;">
            <asp:Label ID="lblCount_Followups" runat="server" Text=""
                Style="margin: 2px"></asp:Label><br />
            <asp:Label ID="lblCount_Workflow" runat="server" Text="" 
                Style="margin: 2px"></asp:Label><br />
            <asp:Label ID="lblCount_Inbox" runat="server" Text=""
                Style="margin: 2px"></asp:Label><br />
            <asp:Timer ID="Timer1" runat="server" Interval="111115000">
            </asp:Timer>

            <asp:Label ID="Label1" runat="server" Text="Notification Message"
                Style="margin: 2px"></asp:Label><br />
            <asp:Label ID="Label2" runat="server" Text="Notification Message"
                Style="margin: 2px"></asp:Label><br />
            <asp:Label ID="Label3" runat="server" Text="Notification Message"
                Style="margin: 2px"></asp:Label><br />


            <asp:Label ID="Label4" runat="server" Text="Notification Message"
                Style="margin: 2px"></asp:Label><br />
            <asp:Label ID="Label5" runat="server" Text="Notification Message"
                Style="margin: 2px"></asp:Label><br />
            <asp:Label ID="Label6" runat="server" Text="Notification Message"
                Style="margin: 2px"></asp:Label><br />


            <asp:Label ID="Label7" runat="server" Text="Notification Message"
                Style="margin: 2px"></asp:Label><br />
            <asp:Label ID="Label8" runat="server" Text="Notification Message"
                Style="margin: 2px"></asp:Label><br />
            <asp:Label ID="Label9" runat="server" Text="Notification Message"
                Style="margin: 2px"></asp:Label><br />

        </div>
        </div>

Answer by Starx

You have to call a function on the parent page from the iframe to do this.

On parent page, create a similar function like this

function resizeIframe(var) {
    $("iframeid").height(var);
}

Now, from inside the iframe call the following snippet

$(window).load(function() { 
// ^ Once everything load. You can change this any event suitable
    parent.resizeIframe($(window).outerHeight());
});
Read more
...

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