I am trying to get this nav bar to respond on mobile Safari. It works fine on iPhone simulator.
From this answer thought it would work by simply adding cursor:pointer property but still no luck.
How do I use jQuery for click event in iPhone web application
Any help much appreciated (the code works fine on desktop browsers).
$(document).ready(function(){
//Click nav links
$('.nav li').click(function(e){
$('.nav li').attr('id', ''); //navtabs inactive
$(this).attr('id', 'activetab'); // clicked tab active
//hide fieldsets
$('fieldset').attr('class', 'hidden');
whichitem=$(this).attr('title'); //get title nav clicked
//show class cleared
$("fieldset[title='"+whichitem+"']").attr('class', '');
});
});
and the form:
<div class="nav">
<ul>
<li id="activetab" title="<?php echo _('Login'); ?>"><?php echo _('Step 1'); ?></li>
<li title="<?php echo _('Professional Details'); ?>"><?php echo _('Step 2'); ?></li>
<li title="<?php echo _('Optional'); ?>"><?php echo _('Step 3'); ?></li>
</ul>
</div>
<button type="submit"><?php echo _('Submit'); ?></button>
</fieldset>
</form>
:) Fixed
$(document).ready(function(){
var ua = navigator.userAgent,
event = (ua.match(/iPhone/i)) ? "touchstart" : "click";
Related
I am trying to a create a View which provides a summary table of various site members profiles - then each summary has a button, that once clicked, takes the user to that member's full profile. I can get the summary page to work properly, but I cant get the second part -where the button takes the user to the members full profile to work.
Here is my controller:
public function network_barre()
{
$this->load->model("Profiles_model");
$style ='barre';
$profilesubdata["fetch_data"] = $this->Profiles_model->fetch_data($style);
$this->load->view('templates/header');
$this->load->view('pages/page-network_barre', $profilesubdata);
$this->load->view('templates/footer');
Here is my Model "Profiles Model"
function fetch_data($style)
{
$this->db->select("username, email, style, about");
$this->db->from("profiles");
$this->db->where('style', $style);
$query = $this->db->get();
return $query;
}
Here is the view
<div class="container">
<div class="row d-flex justify-content-center card-top">
<?php
if($fetch_data->num_rows()>0)
{
foreach ($fetch_data->result() as $row)
{
?>
<div class="col-lg-4 col-md-6">
<div class="card card-warning wow zoomInUp mb-4 animation-delay-5">
<div class="withripple zoom-img">
<img src="<?=base_url();?>assets/img/demo/avatar4.jpg" class="img-fluid">
</div>
<div class="card-body">
<span class="badge badge-warning pull-right"><?php echo $row->style; ?></span>
<h3 class="color-warning"><?php echo $row->username; ?></h3>
<p><?php $string=character_limiter($row->about, 255, '…(More in Profile)') ; echo $string?></p>
<div class="row">
<div class="col text-center">
<!-- BUTTON -->
<form method="POST" action="<?php echo base_url(); ?>public_area/gotopublicprofile/<?php echo $row->email; ?>">
<input type="hidden" name="<?php echo $this->security->get_csrf_token_name();?>" value="<?php echo $this->security->get_csrf_hash();?>">
<button type="submit" class="btn btn-raised btn-sm btn-warning" name="submit" value="submit"><i class="zmdi zmdi-account"></i>Profile</button>
</form>
</div>
</div>
</div>
</div>
</div>
<?php //this tag close out php tags above
}
}
?>
</div>
</div>
here is Controller gotopublicprofile
function gotopublicprofile()
{
$this->load->model("profiles_model");
$email = '$this->uri->segment(3)';
$profiledata["fetch_profiledata"] = $this->Profiles_model->fetch_profiledata($email);
$this->load->view('templates/header');
$this->load->view('pages/page-profilepublic', $profiledata);
$this->load->view('templates/footer');
}
And here is the fetch_profiledata function in the Model:
function fetch_profiledata($email)
{
$this->db->where('email', $email);
$query = $this->db->get("profiles");
return $query;
}
I always get these error messages:
Undefined property: Public_area::$Profiles_model
AND
Call to a member function fetch_profiledata() on null
I am sure I am just missing something simple, as lots of websites use this approach.
Thanks in advance!
So I figured it out..it was a combination of little things:
First
$email = '$this->uri->segment(3)';
became
$email = $this->uri->segment(3);
Thanks #kirb! and
function gotopublicprofile()
{
$this->load->model("profiles_model");
became
function gotopublicprofile()
{
$this->load->model("Profiles_model");
Thanks #Atal Prateek!
Probably something obvious that I fail to see where it goes wrong. Perhaps its the logic I misunderstand. I searched quite a lot and everything I found only dealt with navigation problems for selecting the proper tabs.
I have a rather large site developed using PHP on platform codeigniter v2.2.3. It uses FORMS, FORM validation and ocassionally some jQuery (mainly for visualisation). So I know how the Model, Controller, View system works even as Form validation and display of errors, refilling forms etc.
The problem: I have a backend where some controllers provide me data on several topics and allow me to make changes using simple PHP/CI forms. I want to integrate these various controllers that are now started from a switchboard/one page into one page with TABS. So I can use tabbed views. Mainly one tab linked to one controller.
I can display the tabs, fill it with data from a controller/view. I can also show a form on a tab when selected. However: when I submit the form, my view breaks out of the TABBED view. The same when errors are generated. I don't want to recode all logic of validation over to jquery. The site is simply too large.
Question: I am looking how to properly display the reopened form when there were form validation errors...
screendump of tabs with form
Below the "logic". The complete code (an isolated username, email example) can be found at my public bitbucket repo: https://bitbucket.org/ALchEmiXt/ci-tab-test
Building the tabs:
Initial controller testtab:
<?php
class Testtab extends CI_Controller {
function index()
{
$this->data['welcome'] = 'Welcome tester!';
$this->load->view( 'testtab_view', $this->data );
}
}
?>
Initial view testtab_view: (footer and header load all default generic jquery, bootstrap logic)
<?php $this->load->view('header_testform'); ?>
<ul class="nav nav-tabs" id="uvpbTabs">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li><a data-toggle="tab" href="#form1" data-tab-url="testform">formtesting</a></li>
<li><a data-toggle="tab" href="#stats">Stats</a></li>
<li><a data-toggle="tab" href="#admin">Admin</a></li>
</ul>
<!-- The data and views come here -->
<div class="tab-content" id="all-tabs">
<div id="home" class="tab-pane fade in active"><h3><?php echo $welcome ?></h3></div>
<div id="form1" class="tab-pane fade"></div>
<div id="stats" class="tab-pane fade"><h3>Stats of the pages</h3></div>
<div id="admin" class="tab-pane fade"><h3>Admin stuff</h3></div>
</div>
<?php $this->load->view('footer_testform'); ?>
The form
testform controller:
<?php
class Testform extends CI_Controller {
function index()
{
$this->load->helper(array('form', 'url'));
$this->load->library('form_validation');
$this->form_validation->set_rules('username', 'Username', 'required');
$this->form_validation->set_rules('email', 'Email', 'required|valid_email');
if ($this->form_validation->run() == FALSE) {
$this->load->view('testtabform_view');
} else {
$this->load->view('testform_succes');
}
}
}
?>
testtabform_view
<div id="formcontainer">
<?php echo validation_errors(); ?>
<?php echo form_open('testform'); ?>
<h3>TestTabForm_view</h3>
<h5>Username</h5>
<input type="text" name="username" value="<?php echo set_value('username'); ?>" size="50" />
<h5>Email Address</h5>
<input type="text" name="email" value="<?php echo set_value('email'); ?>" size="50" />
<div><input type="submit" value="Submit" /></div>
</form>
</div>
if ($this->form_validation->run() == FALSE)
}
// $this->load->view('testtabform_view');
$this->session->set_flashdata('validation_errors', validation_errors());
redirect('testtab');
}
else
{
$this->load->view('testform_succes');
}
Then control $this->session->flashdata('validation_errors'); checking if those are set.
Google Analytics provide a feature that can analyze "Age" & "Gender" of visitors. But my customer want to track these data by submiting a form after checkout successfully.
That form looks as follow:
<form id="form-checkout" class="form-success" method="post" action="">
<ol class="fs-fields">
<li class="gender">
<label><?php echo $this->__('Gender') ?></label>
<div class="fs-radio-group fs-radio-custom clearfix fs-anim-lower">
<span><input type="radio" name="gender" value="Male" /><label><?php echo $this->__('Male')?></label></span>
<span><input type="radio" name="gender" value="Female" /><label><?php echo $this->__('Female')?></label></span>
</div>
</li>
<li class="ages">
<label><?php echo $this->__('Ages') ?></label>
<select name="ages">
<option value="< 20"><?php echo $this->__('< 20') ?></option>
<option value="20-35"><?php echo $this->__('20-35') ?></option>
<option value="35-50"><?php echo $this->__('35-50') ?></option>
<option value="> 50"><?php echo $this->__('> 50') ?></option>
</select>
</li>
</ol>
<div class="button-box">
<button class="fs-submit fs-show" type="button" title="<?php echo $this->__('submit') ?>" onclick="sendDataToUa();"><span><?php echo $this->__("Back to Home")?></span></button>
<button class="fs-submit fs-show" type="button" title="<?php echo $this->__('Continue Shopping') ?>" onclick="window.location='<?php echo $this->getUrl() ?>'"><span><?php echo $this->__('Continue Shopping') ?></span></button>
</div>
</form>
Js script:
<script type="text/javascript">
function sendDataToUa(){
var gender = jQuery('input[name=gender]:checked', '#form-checkout').val();
var ages = jQuery('#form-checkout option:selected').val();
ga('set', 'dimension1', gender);
ga('set', 'dimension2', ages);
ga('send', 'pageview', {
'dimension1': gender,
'dimension2': ages,
});
}
</script>
UPDATE:
My tracking code look like:
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics_debug.js','ga');
ga('create', 'UA-64495311-1','auto');
ga('require', 'displayfeatures');
ga('set', 'dimension1', 'male');
ga('set', 'dimension2', '< 20');
sendDataToUa();
ga('send', 'pageview', '/popupstore');
</script>
I'm waiting for report data on google analytics.
The built-in Google feature imports data for recognized visitors from other Google Services (GDN mostly, I think), so this will not help you here (you cannot add demographic data yourself).
You need to create custom dimensions in your property settings (session or user scope - hardly any visitor will change gender and age between hits) and send them along with an interaction hit. Implementation details depend on your setup so I just refer you to the documentation for custom dimensions and metrics, and then you may get back to us with any specific question that might come up.
I'm using fancybox plugin for my image gallery and having really interested trouble.
I have image gallery groups.
On my first group, if i click hover link for to open first image. i'm getting an error like "The requested content cannot be loaded.
Please try again later."
But it works fine in other image groups. For example please check http://www.naplesoft.com/hotels/likya-residence-and-spa-and-the-likya-retreat/?tab=rooms
Click view more info for Deluxe room, then click hover link "Click here to view more room images"
You will get an error.
But if you go other room types like "Deluxe room 106 or other ones" it works fine.
I don't know what did i wrong?
Here is PHP
<?php if (count($room['room_images']) > 0 ) { ?>
<p><a class="fancybox" rel="gallery<?php echo $counter; ?>" href="<?php echo $image['image']['sizes']['large']; ?>" title="<?php echo $image['caption']; ?>" >Click here</a> to view more room images</p>
<div class="image">
<?php // $isFirst = true;
foreach ($room['room_images'] as $image ) {
// if (!$isFirst) { ?>
<div class="foto"> <a class="fancybox" rel="gallery<?php echo $counter; ?>" href="<?php echo $image['image']['sizes']['large']; ?>" title="<?php echo $image['caption']; ?>" ><img style="width:150px; height:96px;" src="<?php echo $image['image']['sizes']['thumbnail']; ?>" alt="" /></a> </div>
Any helps?
I am trying to go along with bootstrap and Codeigniter, but I am having a little problem, I cant seem to figure out how to align 3 simple elements into one row, so they are aligned perfectly next to each other.
I want my H3 tag, input field and my submit button from my form to be next to each other. I have already tried the span4 on the 3 objects within divs, then also display:inline, but nothing works correctly. I dont know why, but If I want them to be perfectly next to each other, I just have to put there margin-top: -7px and other margins on the other objects but this looks like a not a good approach on this matter at all. Could you please help me ? !
My code:
<div class="well">
<h3>My superb h3 tag!</h3>
<?php echo form_open('search/quick_search'); ?>
<?php echo form_error('search_query'); ?>
<?php echo form_input('search_query','','placeholder="Search query"'); ?>
<?php echo form_submit('submit_quick_search','Search','class="btn"'); ?>
<?php echo form_close(); ?>
How does it look
This is how I've been using then together (Horizontal form)
<?php echo form_open('search/quick_search', 'class="form-horizontal');?>
<div class="control-group <?php echo form_error('search_query')? 'error' : ''; ?>">
<label class="control-label" for="search_query">Search Term:</label>
<div class="controls">
<?php echo form_input('search_query','','placeholder="Search query"'); ?>
<span class="help-inline"><?php echo form_error('search_query'); ?></span>
<span class="help-block"></span>
</div>
</div>
<div class="form-actions">
<?php echo form_submit('submit_quick_search', 'Search', 'class="btn"'); ?>
</div>
<?php echo form_close(); ?>