I'm having a tough time with something that I think is pretty simple. I hope you folks can help me.
I'm using a jquery plugin called zoomtoo.
I need to have the plugin function (zoomToo()) applied on a child div (modal-img-wrap) inside its parent div (modal).
The JS script:
<script type="text/javascript">
$(function() {
$(".modal").zoomToo({
magnify: 1
});
});
</script>
The HTML code:
<body>
<div id="ex2" class="modal">
<div class="modal-img-wrap">
<img class="modal-img" src="homedrive.jpg" />
</div>
</div>
</body>
Here is a working example. Notice the attributes in the divs. And bind the jquery.zoomtoo.min.js script, because it's minified, e.g. smaller. If you already have a css class on the image containing div (modal-img-wrap), then you can also directly reference it inside js. So, instead of .modal .modal-img-wrap you can write .modal-img-wrap in js script.
Good luck.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes" />
<meta charset="UTF-8" />
<!-- The above 3 meta tags must come first in the head -->
<title>Demo</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" type="text/javascript" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="dist/jquery.zoomtoo.min.js"></script>
<script type="text/javascript">
$(function () {
$(".modal-img-wrap").zoomToo({
magnify: 1
});
});
</script>
</head>
<body>
<div id="ex2" class="modal"><!-- Not this div -->
<div class="modal-img-wrap" data-src="homedrive_big.jpg"><!-- I need this div selected by the plugin. -->
<img class="modal-img" src="homedrive_normal.jpg" />
</div>
</div>
</body>
</html>
I'm confused, you can select the div by name $( "#MyDiv" ). Set the name property of the div.
$(function() {
$("#MyDiv").zoomToo({
magnify: 1
});
});
</script>
Related
I am trying to change pages on in my project. I have two divs containing information and they each have a data-role of "page". In addition, they both have ids. On my js file I have a simple onclick event that calls a function that then uses the
$.mobile.changePage("#2");
To go from my first div to my second div. The only problem is whenever I try to change the page I am getting an error:
Uncaught TypeError: Cannot read property 'changePage' of undefined
I have already searched on other peoples posts on stack overflow and haven't found anything that can help me. Here is some of my code:
global.html
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0,
maximum-scale=1.0, user-scalable=no">
<script src="js/lib/jquery-2.1.4.js"></script>
<link rel="stylesheet" type="text/css" href="css/lib/jquery.mobile-
1.4.5.css">
<script src="js/global.js"></script>
<script src="js/lib/jquery.mobile-1.4.5.js"></script>
<script src="js/p5.min.js"></script>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js">
</script>
</head>
<body>
<div data-role="page" id="1" style="background-color: #56f0b1;">
<button id ="startGame" type="button">Start Game</button>
</div>
<div data-role="page" id="2" style="background-color: #56f0b1;">
<h2>Page 2 </h2>
</div>
</body>
</html>
global.js
$(document).ready(function () {
$("#startGame").on("click",getToNextPage);
});
function getToNextPage(){
$.mobile.changePage("#2");
}
As mentioned in comments, the core jQuery library must be loaded before jQuery Mobile.
In your code, it seems you're loading two jQuery versions and one of them is loaded after jQuery Mobile.
Also, according to comments in this question, the page IDs should not be only numeric.
Here's an example:
$(document).ready(function() {
$("#startGame").on("click", getToNextPage);
});
function getToNextPage() {
$.mobile.changePage("#page2");
}
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<div data-role="page" id="page1" style="background-color: #56f0b1;">
<button id="startGame" type="button">Start Game</button>
</div>
<div data-role="page" id="page2" style="background-color: #56f0b1;">
<h2>Page 2 </h2>
</div>
I'm pretty new to JavaScript, I am trying to execute my external JS to html, what im trying to do is to see if the mouseover responds when my mouse hovers one img.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>GWW- A Global Warming Warning...</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="gridContainer clearfix">
<div class="world">
<img src="poluicao/poluicao0001.png" alt="Mundo">
<div class="botao1">
<img src="poluicao/offbuton.png" alt="but1">
</div>
<div class="botao2">
<!--<a href="#" >//-->
<img id="readybotao" src="degelo/offbutton.gif" alt="but2">
<!-- </a> //-->
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="javascript.js"</script>
</body>
</html>
And this is my JS file:
function buttonon() {
alert("If it showed up it worked!");
}
document.getElementById('readybotao').addEventListener("onmousover",buttonon());
What am I doing wrong?
change external javascript like this :
var ele = document.getElementById("readybotao");
ele.addEventListener("mouseover",buttonon);
function buttonon() {
alert("If it showed up it worked!");
}
and close tag script :
<script src="javascript.js"></script>
you have >missing on the line <script src="javascript.js"</script>
I am trying to find a way to show a pop up message when user is trying to highlight and copy text from a paragraph. I've searched around the net for possible solutions but I could not find any that will trigger pop up message when text or random part of the paragraph is selected.
I've looked at this. But it seems that it uses div block rather than pop up.
It seems that #Nishit Maheta answer solved my issue. Shortly I will update the post with my solution.
Try this:
tinyMCE.init({
mode: "exact",
elements: "test",
skin: "o2k7",
skin_variant: "red",
setup: function (ed) {
ed.onMouseUp.add(function (ed, e) {
var x = tinyMCE.activeEditor.selection.getContent();
if(x)
alert(x);
});
}
});
JSFIDDLE DEMO
Try Bootstrap Popover. Following is a sample code,
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<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>
</head>
<body>
<div class="container">
<h3>Popover Example</h3>
<p data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</p>
</div>
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
</body>
</html>
It works well for me, hope it will resolve your issue.
$("#myDiv").mousedown(function(){
$("#myDiv").mouseup(function(){
$("#myPopUp").show();
});
});
#myPopUp
{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myDiv">
hello please select the text and see
</div>
<div id="myPopUp">
popover message
</div>
I want to access and modify elements that are loaded with angular views. I can't seem to do it, however the element is outputted in console just fine.
Layout
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title></title>
</head>
<body data-ng-app="myapp">
<div class="wrap">
<div class="header"></div>
<div class="content">
<div data-ng-view=""></div>
</div>
</div>
<script type="text/javascript" src="/content/plugins/jquery/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="/content/plugins/bootstrap/bootstrap.min.js"></script>
<script type="text/javascript" src="/content/plugins/pxgradient/pxgradient-1.0.2.jquery.js"></script>
<script type="text/javascript" src="/content/plugins/angularjs/angular.js"></script>
<script type="text/javascript" src="/content/plugins/angularjs/angular-route.js"></script>
<script type="text/javascript" src="/content/plugins/angularjs/angular-animate.js"></script>
<script type="text/javascript" src="/app/app.js"></script>
<script type="text/javascript" src="/content/js/main.js"></script>
</body>
</html>
View
<div class="home">
<h1 class="gradient">Transformation is comming</h1>
</div>
Javascript
$(function () {
var element = $('.gradient');
console.log(element); // this works
element.css('color', 'red'); // this does not
});
Ok I think I have a solution, try this:
app.run(function ($rootScope) {
$rootScope.$on('$viewContentLoaded', function () {
$('.gradient').css('color', 'red');
});
});
Your element might not be "ready" yet (not in the DOM yet).
You need to access to it in jquery document.ready function
If you use Angular, after the bootstrapping process is done, use Angular angular.element(document).ready
Example code: http://pairp.com/6144/1
Maybe your element has a css rule that you should override.
Try this:
$('.gradient').removeAttr('style').css('color','red');
You need write CSS as object:
element.css({'color':'red'});
I am having trouble getting jQuery-mobile load page to load my next page into the "content" div.
I have cut my page down to the basics and here is the code.
index.html:
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JQuery Mobile Load Page Test</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div data-role="page">
<div id="containerTest" data-role="content">
<input type="button" id="nextPage" data-inline="true" value="Load Second Page"/>
</div> <!-- /content -->
</div> <!-- /page -->
<script>
$( "#nextPage" ).on( "click", function()
{
$.mobile.loadPage("nextPage.html",
{
pageContainer: $('#containerTest')
});
});
</script>
</body>
</html>
and nextPage.html
<div data-role="page">
<p>this is the next page</p>
</div> <!-- /page -->
I don't think You can load a page inside another page, you could try something like this though:
$(document).on('pageinit', function(){
$( "#nextPage" ).on( "click", function(){
$('#containerTest').load('nextPage.html [data-role="content"]',function(){
$('.ui-page-active').trigger('create');
});
});
});
This will load the content (<div data-role="content">) from page 2 inside the container, then it will trigger the create event on the original page to enhance the loaded content