I'm looking to change this bit of code to a link instead of having it appear as a small popup window. How would I change it to link to a page of "http://example.com/register" instead of having the registration window drop down?
<div class="login-wrapper">
<a id="sticky-login" class="info-bottom icon-login sticky-button" title="<?php _e('Login',IT_TEXTDOMAIN); ?>"></a>
<div class="sticky-form" id="sticky-login-form">
<div class="loading">
<div> </div>
</div>
<?php echo it_login_form(); ?>
</div>
</div>
This seems too easy so I'm probably missing something.
You'd add an href attribute to the <a> tag, and if javascript is creating the popup, remove either the id attribute from the <a> tag or the class to which the javascript is linked.
<a class="info-bottom icon-login sticky-button" title="<?php _e('Login',IT_TEXTDOMAIN); ?>" href="http://example.com/register"></a>
Related
I need to add target="_blank" property somewhere so that when logos are clicked they are opened in a new tab.
I am working on a website that uses the following PHP code to reference links in logos:
<?php if($cta): ?>
<div class="product-logos-container">
<?php foreach($cta as $_cta): ?>
<span class="card" <?php if($_cta['banner_link']): ?>onclick="window.location.href='<?php echo $_cta['banner_link'] ?>'"<?php endif ?>>
<span class="detail" style="opacity: 0;">
<span class="inner"><?php echo $_cta['banner_title'] ?></span>
</span>
<img src="/clear_cta/<?php echo $_cta['banner_filename'] ?>" alt="<?php echo $_cta['banner_title'] ?>" class="image"/>
......
Now I'm fairly certain that I need to add target="_blank" to the 4th line. I'm not sure which syntax is right for it, and after doing some research I'm starting to think that window.location might be the problem. If so please advise an alternative code that would open links when clicked in new tabs.
Use window.open instead of window.location
window.open('<?php echo $_cta['banner_link'] ?>',
'_blank' // <- This is what makes it open in a new window.
);
Only we can use target="_blank" inside anchor tags () to tell the browser where the linked document should be loaded.
Try This
1
<span>
See my portfolio
</span>
2
<a target = '_blank' href=view_rfp_detail.php?sna=$sna >$sna</a>
In Your case this is more of a JavaSript problem. The important part is
window.location.href=something
It is very complicated to open a new window or tab from JavaScript. This is the infamous popup. The browser started to block it by default long time ago.
You can try to rewrite this part
<span class="card" <?php if($_cta['banner_link']): ?>onclick="window.location.href='<?php echo $_cta['banner_link'] ?>'"<?php endif ?>>?>onclick="window.location.href='<?php echo $_cta['banner_link'] ?>'"<?php endif ?>>
Into something like
<a class="card" <?php if($_cta['banner_link']): ?>href="<?php echo $_cta['banner_link'] ?>" target="_blank"<?php endif ?>>
and change the closing tag too.
Just a simple question to ask if there is someone available to assist me. Please take a look at this section on my index page:
<?php foreach($galleries as $item) { ?>
<div class="col-md-2">
<p>Eagle Fruit <?= $item['gallery_name'] ?></p>
<img src="<?php echo base_url() . 'assets/img/site/' . $item['gallery_cover'] ?>" class="img-responsive">
View the Gallery
</div>
<?php } ?>
My Controller is setup with the following function
<?php defined('BASEPATH') OR exit('No direct script access allowed');
class Site extends MX_Controller {
public function __construct()
{
parent::__construct();
$this->load->model('gallery/Gallery_m');
}
public function index($id = 'ID')
{
$data['title'] = 'Welcome to Eagle Fruit Alliance (Pty) Ltd';
$data['galleries'] = $this->Gallery_m->get_galleries();
$data['gallery'] = $this->Gallery_m->view($id);
$data['content'] = 'index_view';
$this->load->view('templates/site/template',$data);
}}
Now when I click on the link i would like the gallery to open in a modal how would i achieve this? I have added a modal with the following code where am I going wrong:
Modal
<!-- Modal -->
<div class="modal fade" id="gallery" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel"><?= $gallery['name'];?></h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- ./Model -->
Because you are interacting with the user's click on an image, this isn't a PHP or HTML question. User interaction always involves javascript/jQuery.
AJAX is a two-part methodology. It is initiated in javascript, and sends data to a server-side PHP file that does something and returns a response, which is received/dealt with in javascript. See this SO post for more information on AJAX.
However, this question doesn't need to use AJAX either, because there is no additional data to fetch.
It's a bit difficult from your code to see exactly how to trigger the modal. Usually, we look for a commonality in the code, such as a class name, to use as the trigger. In your case, you could try:
$('p+img').click()
However, I recommend modifying your code like this:
<img class="mod_trig img-responsive" src="<?php echo base_url() . 'assets/img/site/' . $item['gallery_cover'] ?>" >
Note: I moved the class to front of tag only to make it very visible in this answer. Keep it where it is in your code, if you wish.
Next, when a trigger is clicked, you use CSS selectors (jQuery uses CSS selectors, so learn them -- and Bootstrap uses jQuery, so learn jQuery) to get the href attribute of the <a> tag -- this is the direct link to the desired image, correct? You would only need to use AJAX if you didn't already have some information available to you on the page, but in this case you have all you need.
Use jQuery's .html() method to create an <img> tag inside the Bootstrap modal, replacing whatever was in that particular DIV. Here is a very simple example where we demonstrate exactly this procedure, but instead of putting it into the Bootstrap modal's framework we simply create the <img> tag inside a pre-existing DIV called #msg.
jsFiddle Demo
$('p+img').click(function(){
var i = $(this).next('a').attr('href');
//alert(i);
$('#msg').html('<img src="'+i+'" class="msg" width="200" height="200" />');
});
#msg{position:absolute;top:30%;left:40%;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div>
<p>This is a test</p>
<img src="http://placeimg.com/98/100/animals" />
View the Image
</div>
<div>
<p>This is a test</p>
<img src="http://placeimg.com/100/95/animals" />
View the Image
</div>
<div>
<p>This is a test</p>
<img src="http://placeimg.com/95/95/animals" />
View the Image
</div>
<div id="msg"></div>
*It's not a perfect example, because the placeholder image website does not serve the same image when requesting identical parameters, so you can uncomment the alert() line to see that each time you click an image you get different parameters injected into the #msg div -- you get the correct parameters for the <img> on which you clicked.
Now, all you need to do is to inject (via html() method) the newly-created <img> tag into the appropriate Bootstrap div instead of into the #msg div:
$('.modal-body').html('<img src="'+i+'" class="msg" width="200" height="200" />');
And trigger the modal to display:
jsFiddle Next Demo
$('.mod-trigger').click(function(){
var i = $(this).next('a').attr('href');
$('.modal-body').html('<img src="'+i+'" class="msg" width="200" height="200" />');
$('#gallery-lightbox').modal('show');
});
Note how in this example I replaced the CSS selector with '.mod-trigger', and created a class on each image with that className
This new example shows you how to trigger the modal if a user clicks on the <a> tag:
jsFiddle Demo
Note that the <a> tag's default action is to navigate to another page. You don't want this, so the first thing you must do is suppress that default behavior:
$('.mod-atag').click(function(e){
e.preventDefault();
var i = $(this).attr('href');
$('.modal-body').html('<img src="'+i+'" class="msg" width="200" height="200" />');
$('#gallery-lightbox').modal('show');
});
Also note that I added a className to each <a> tag to make it easy to detect the click.
I have this div content in my header.php file contained in application/themes/custom_name/elements
<?php defined('C5_EXECUTE') or die("Access Denied.");
$this->inc('elements/header_top.php');
$cl_txt = $c->getAttribute('client_login_txt');
$cl_url = $c->getAttribute('client_login_url');
?>
......
<div class="login">
<a href="<?php echo $cl_url ?>" target="_blank">
<button type="button" class="btn-login"><?php echo $cl_txt ?></button>
</a>
</div>
I would like to change the link contained in the div.
Where can I do it?
There are two Page Attributes, the link URL is called Client Link URL and the link text is called Client Link Text, I was able to edit this by going to Full Sitemap and click on the page I am trying to change and select Attributes.
I created a menu with links (#) which aims to show & hide a div thanks to the onclick attribute.
For example the link "home" can hide/show the div "contentHome", the link "contact" can hide/show the div "contentContact".
The problem I have is that the container div "content" includes the div "contentHome" and "contentContact" when i click on the 2 links one time...
Here is a part of my code :
<li><a href="#" onclick="toggle('contentHome');" ><?php echo $lang['MENU_ACCUEIL'];?>
<div id="content">
<div id="contentHome">
<img src="Images/photo.jpg" class="imgphoto" alt="Simplepic" />
<?php echo $lang['TEXTE_ACCUEIL'];?>
<img src="Images/work.png" class="imgwork" height="100" width="100" alt="Travaux" />
<?php echo $lang['TEXTE_SOON'];?>
</div>
<div id="contentContact">
...
</div>
</div>
The position is static, I can't put a z-index and when I put display:none;, divs don't want to load.
What do you think ? I just wanted to create a dynamic menu with div but the php includes makes me struggle...
Here i've created some example of toggle with divs.
<li>Toggle Red</li>
<li>Toggle Blue</li>
<div id="content">
<div class="toggled-item" id="contentHome">
<div style="width:200px; background-color:#f00; height:200px;"></div>
</div>
<div class="toggled-item" id="contentContact">
<div style="width:200px; background-color:#00f; height:200px;"> </div>
</div>
</div>
<script>
$(document).ready(function(){
$("#lnk_contentHome, #lnk_contentContact").click(function(){
$(".toggled-item").hide();
var target = $(this).attr("id").split("_")[1];
$("#" + target).toggle();
});
});
</script>
https://jsfiddle.net/ow7dd12f/5/
Hope helps.
I am trying to generate unique IDs for each modal, as I will be loading in an address specific map to each modal. My issue is that when I click the link:
<a data-toggle="modal" href="#myModal_<? echo $meeting['ID'] ?>" ><? echo $meeting['Address'].", ".$meeting['City'] ?></a>
it tries to take me to mypage.php/#myModal_8 (or whatever the given ID is, instead of pulling up that specific modal. The modals work great is I don't have the ID attached, but they won't load dynamic content that way.
<a data-toggle="modal" href="#myModal_<? echo $meeting['ID'] ?>" ><? echo $meeting['Address'].", ".$meeting['City'] ?></a>
</p>
<div class="modal hide" id="#myModal_<? echo $meeting['ID'] ?>">
<div class="modal-body">
<? echo $meeting['Address'] ?>
</div>
<div class="modal-footer">
Close
</div>
</div>
Any help on this would be much appreciated. Thank you!
It's all about the ID you are giving to the modal : id="#myModal_<? echo $meeting['ID'] ?>"
The # is only needed for the jQuery selector, not the ID. Which would give :
<div class="modal hide" id="myModal_<? echo $meeting['ID'] ?>">
Further more, you should open your php tags with <?php for the reasons described here : Are PHP short tags acceptable to use?