I'm trying to add a help button in a Zend form using qTip 2. The button is a simple image, and I would like to open a pop-in when the image is clicked.
Here my code:
in Booostrap.php:
protected function _initView() {
...
$view->headLink()
->appendStylesheet('/css/jquery/smoothness/jquery-ui-1.10.1.custom.min.css')
->appendStylesheet('/css/jquery/jquery.qtip.min.css');
}
protected function _initJQuery() {
...
$view->jQuery()
->setLocalPath('/js/jquery/jquery-1.9.1.min.js')
->setUiLocalPath('/js/jquery/jquery-ui-1.10.1.custom.min.js')
->addJavascriptFile('/js/jquery.qtip.min.js')
->enable()
->uiEnable();
}
In my view:
<?php
$this->headscript()->appendScript('$(data-tooltip!="").qtip({content: {attr: \'data-tooltip\'}});');
?>
...
<img data-tooltip="thing" src="/images/repo/help-22x22.png"/>
And the rendered result in my browser:
<link href="/css/jquery/smoothness/jquery-ui-1.10.1.custom.min.css" media="screen" rel="stylesheet" type="text/css" >
<link href="/css/jquery/jquery.qtip.min.css" media="screen" rel="stylesheet" type="text/css" >
...
<script type="text/javascript" src="/js/jquery/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="/js/jquery/jquery-ui-1.10.1.custom.min.js"></script>
<script type="text/javascript" src="/js/jquery.qtip.min.js"></script>
...
<script type="text/javascript">
//<!--
$(data-tooltip!="").qtip({content: {attr: 'data-tooltip'}}); //-->
</script>
...
<img data-tooltip="truc" src="/images/repo/help-22x22.png"/>
which is what I wanted to get. Problem is, the tooltip doesn't show up. Not even is an event fired when I click on the picture, according to the Javascript console. So my idea i wrong, but I can't understand why. Any idea?
I Think that the problem is here: $(data-tooltip!="") instead of $('[data-tooltip!=""]').
An other problem is your call is before the tag img so use InlineScript ìnstead of headscript
To Finish, I think should precise de name of the tag (img) in the selector.
Try to replace
$this->headscript()->appendScript('$(data-tooltip!="").qtip({content: {attr: \'data-tooltip\'}});');
By
$this->InlineScript()->appendScript('$(\'img[data-tooltip!=""]\').qtip({content: {attr: \'data-tooltip\'}});');
Not sure but your qtip initialization has to be in doc ready:
<?php
$this->headscript()->appendScript('$(function(){// here qtip code});');
?>
Related
In my code, there is a lot of image in a table. I want to click a photo & then the photo will popup in a large size over the screen. But I do not have much idea about javascript & jquery. I try to do this but the problem is it popup a box but don't show the picture. I know that there is a problm in script to show the picture. can u please tell me where is the wrong or give me a proper code for popup image after click.
my header link is below. is there need any other link to be added??
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://w2ui.com/src/w2ui-1.4.2.min.css" />
<script type="text/javascript" src="http://w2ui.com/src/w2ui-1.4.2.min.js"></script>
here is html part:
<div>
<td> <img class="btn" onclick="popup()" style="width:100px; height:100px; border-radius:4px;" src="upload/<?php echo $row['image'];?>"></img></td>
</div>
here is the javascript:
<script type="text/javascript">
function popup() {
w2popup.open({
title: 'Image',
body: '<div class="w2ui-centered"><img src="upload/<?php echo $row['image'];?>"></img></div>'
});
}
</script>
can anyone please help me how to show image in the pop up box. thanks in advance.
Instead of the onclick attribute, you could assign a class popup_image to your img and attach a click handler when the DOM is ready.
I took the liberty to remove scripts and tags that were not neccessary to demonstrate the result.
$(document).ready(function() {
$(".popup_image").on('click', function() {
w2popup.open({
title: 'Image',
body: '<div class="w2ui-centered"><img src="' + $(this).attr('src') + '"></img></div>'
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="http://w2ui.com/src/w2ui-1.4.2.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://w2ui.com/src/w2ui-1.4.2.min.css" />
<img class="btn popup_image" style="width:100px; height:100px; border-radius:4px;" src="http://lorempixel.com/g/200/200/"></img>
Replace your jquery with below any try:
<script type="text/javascript">
function popup() {
var image = $(this).attr('src');
w2popup.open({
title: 'Image',
body: '<div class="w2ui-centered"><img src="'+image+'"></img></div>'
});
}
</script>
I assume the images are displayed properly which you will click
I would recommend using Colorbox by Jack Moore. It uses JQuery, and is very customizable.
Colorbox: http://www.jacklmoore.com/colorbox/
Demo: http://www.jacklmoore.com/colorbox/example1/
If you aren't opposed to using PHP, you also may want to check out UberGallery. It uses colorbox internally and can be used simply with
<?php include_once('UberGallery.php')
UberGallery::init()->createGallery("path to dir","name of gallery");
?>
I have a button on my web page. once I click on the button a pop-up will appear with some text. here I need to display another HTML page in that pop-up
I have given my code below please help me
<!doctype html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,500">
<link type="text/css" rel="stylesheet" href="popModal.css">
</head>
<body>
<button id="notifyModal_ex1" class="btn btn-primary">Example</button>
<div id="content2" style="display:none">
ghjgh
</div>
<script src="popModal.js"></script>
<script>
$(function(){
$('#notifyModal_ex1').click(function(){
$('#content2').notifyModal({
duration : 1500,
placement : 'center',
overlay : true,
type : 'notify',
onClose : function() {}
});
});
});
</script>
</body>
</html>
Try using jQuery's load():
$('#content2').load("page/url").notifyModal()
To show a loading message:
$('#content2').text("Loading, please wait...").load("page/url").notifyModal()
Or to open the modal when load ends:
$('#content2').load("page/url", function() {
$('#content2').notifyModal();
})
As described in load() docs:
Load data from the server and place the returned HTML into the matched element.
So it will load an html response and append it to the target element.
I am trying to remove all the links from a parsed site which has then had a div removed and placed in the main code. The problem is that I am trying to remove all the 'href' links in the extracted div but am unable to get anywhere. I have tried using 'CSS' and works but only in chrome and I have to use IE. I have looked at 'php simple html dom' parser to see if i could do it before the file is saved but can't get anything to work. so my last resort is to use 'jquery' but the problem is that the links to remove is being extracted from the file and is not directly in the code. If anyone could help me I would really appreciate it. below is the code I am using.
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<meta http-equiv="content-language" content="en">
<meta name="viewport" content="width=500" />
<title>example News</title>
<link rel="stylesheet" type="text/css" href="site/wwwRand1.css">
<?php
include( 'site/simple_html_dom.php');
$html=file_get_html( 'http://example.com/home.php');
$html->save('site/result.htm')
?>
<script type="text/javascript" src="site/jquery.js"></script>
<script type="text/javascript">
$('document').ready(function() {
$('#postsArea').load('site/result.htm #postsArea');
});
</script>
</head>
<body>
<div id="wrap">
<div id="postsArea"></div>
</div>
</body>
Just remove the href attribute from the <a /> tags
$("#postsArea").load( "site/result.htm", function() {
$("#postsArea a").removeAttr("href")
});
If you still want the tags to appear clickable...
$("#postsArea a").removeAttr("href").css("cursor","pointer");
Hope this helps
Try this:
$('document').ready(function () {
$.ajax({
url : 'site/result.htm',
dataType: 'html',
success : function(html){
$html = $(html).find(a).attr("href", "");
$("#postsArea").html($html);
},
error : function(){
$("#postArea").html("<div>No Data Found.</div>");
}
})
});
Here's how I did it:
$(function() {
$('a[href]').each(function() {
var link = jQuery(this);
link.after(jQuery('<span/>').text(link.text()));
link.remove();
});
});
It replaces Foo with <span>Foo</span>.
I use BBC carousel http://www.bbc.co.uk/glow/docs/1.7/furtherinfo/widgets/carousel/. Here is my script code
<script src="/themes/javascript/glow/1.7.7/core/core.js" type="text/javascript"></script>
<script type="text/javascript">
glow.ready(function() {
var carousel4 = new glow.widgets.Carousel("#snapwrap",{
loop: true,
});
});
</script>
it generates Error: glow.widgets is undefined. What am I doing wrong?
Ok, I figured out the problem: You're not including the widgets script or css, per the Widgets section of http://www.bbc.co.uk/glow/docs/articles/getting_started.shtml
So, to resolve your error, you need to modify your script so that it looks like this:
<script src="/themes/javascript/glow/1.7.7/core/core.js" type="text/javascript"></script>
<script src="/themes/javascript/glow/1.7.7/widgets/widgets.js" type="text/javascript"></script>
<link href="/themes/javascript/glow/1.7.7/widgets/widgets.css" type="text/css" rel="stylesheet" />
<script type="text/javascript">
glow.ready(function() {
var carousel4 = new glow.widgets.Carousel("#snapwrap",{
loop: true,
});
});
</script>
Ok, I'm building a website for a friend, I'm currently using jquery-1.4.3.min.js, corners.js, equalcols.js, and a pre-load image script in the head. Everything works great.
Problem is, I now need FancyBox (LightBox alternative) for a page and it won't seem to work! I know it's because something is conflicting with another but I have no idea what. Is it the order in the head? Or something else? Have tried LightBox and that doesn't work either.
It either doesn't work and stops the EqualCols.js from working, or everything else works EXCEPT the FancyBox for the mini-image gallery that is needed.
The head code is as below: (without FancyBox in there)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>
<link rel="stylesheet" href="styles.css" type="text/css" />
<script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>
<!-- PRELOAD MENU IMAGES BEGINNING -->
<script>
var myimages=new Array()
function preloadimages(){
for (i=0;i<preloadimages.arguments.length ;
i + myimages [ i ] =new Image ( myimages [ i ]
src=preloadimages.arguments[i] } Enter path of images to be preloaded
inside parenthesis. Extend list as desired. preloadimages ( images /
home-h.png " images / about-h.png " images / services-rates-h.png "
images / past-work-h.png " images / contact-h.png " images /
shop-specials-h.png " images / free-quote-h.png " images /
book-now-h.png ")
</script>
<!-- PRELOAD MENU IMAGES END -->
<!-- stop curvery corners error in IE -->
<script type="text/javascript" src="js/corners.js"></script>
<script type="text/javascript">
var curvyCornersVerbose = false;
</script>
<!-- stop curvery corners error in IE -->
<!-- EQUAL COLS START -->
<script src="js/equalcols.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#left-col,#right-col').equalCols();
});
</script>
<!-- EQUAL COLS END -->
</head>
Is anyone able to tell me where I'd need to put the FancyBox coding for everything to work? Or what else I can do to get it to work? What are the rules? I've researched on Google and can't seem to find the answer I'm after.
The FancyBox code I need to implement is:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" href="/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
Do I need the top line there if I'm using this already?:
<script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>
Any help much appreciated.
replace:
<script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>
with:
<link rel="stylesheet" href="/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
Fancybox code:
$(document).ready(function() {
$('#single_image').fancybox();
});
below code is working sample - the fancybox iframe version.
make sure that you add anchor tag in your html/jsp
<!-- The popup iframe . The href value will be updated dynamically -->
<a class="iframe" id="iframe" href="/YourApp/imagePopup.do"></a>
the include block is as follows
<script type="text/javascript" src="/js/jquery/fancybox/jquery.easing-1.4.pack.js"></script>
<script type="text/javascript" src="/js/jquery/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
/**
jquery ready function
*/
$(document).ready(function(){
// popup for showing
$("a.iframe").fancybox({
'autoDimensions':false,
'width' : 770,
'height' : 'auto', // height is controlled using jquery.fancybox-1.3.4.css line 79
'centerOnScroll' : true,
'scrolling':'auto',
// 'autoScale': true,
'hideOnOverlayClick' : false,
'enableEscapeButton' :true,
'hideOnContentClick': false,
'type':'iframe'
,'onStart' :function(){$.fancybox.showActivity();}
,'onClosed' :function(){ }
});
}); // end ready