I am trying to create image map tool tips and the image map works fine as in the fiddle.
However when i try to implement the following code in wordpress, the page does not load.
Please help:
Code:
<script type="text/javascript" src="js/mytooltip.js"></script>
<div id="wrapper">
<img width="920" height="450" src="http://www.red-team-design.com/wp-content/uploads/2011/10/world-map.jpg" alt="World continents">
<div class="pin pin-down" data-xpos="170" data-ypos="100">
<h2>North America</h2>
<ul>
<li><b>Area (km�):</b> 24,490,000</li>
<li><b>Population:</b> 528,720,588</li>
</ul>
</div>
<div class="pin" data-xpos="270" data-ypos="320">
<h2>South America</h2>
<ul>
<li><b>Area (km�):</b> 17,840,000</li>
<li><b>Population:</b> 382,000,000</li>
</ul>
</div>
<div class="pin pin-down" data-xpos="450" data-ypos="110">
<h2>Europe</h2>
<ul>
<li><b>Area (km�):</b> 10,180,000</li>
<li><b>Population:</b> 731,000,000 </li>
</ul>
</div>
<div class="pin" data-xpos="450" data-ypos="250">
<h2>Africa</h2>
<ul>
<li><b>Area (km�):</b> 30,370,000</li>
<li><b>Population:</b> 1,022,011,000</li>
</ul>
</div>
<div class="pin pin-down" data-xpos="650" data-ypos="130">
<h2>Asia</h2>
<ul>
<li><b>Area (km�):</b> 43,820,000</li>
<li><b>Population:</b> 3,879,000,000</li>
</ul>
</div>
<div class="pin pin-down" data-xpos="750" data-ypos="310">
<h2>Australia</h2>
<ul>
<li><b>Area (km�):</b> 9,008,500</li>
<li><b>Population:</b> 31,260,000</li>
</ul>
</div>
</div>
Make sure that you've loaded jQuery properly and before your jQuery code:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
Besides that, maybe there is a conflict between jQuery and Wordpress, try to resolve it by using:
jQuery(document).ready(function($){
// Your code here
});
Related
I want to remove the All option in filtering element. How can I do that?
I removed the line for 'all' , but it is still showing.
<div class="row">
<div class="col-lg-12">
<ul id="portfolio-flters">
<li data-filter=".filter-app">Dhaka</li>
<li data-filter=".filter-card">Rajshahi</li>
</ul>
</div>
</div>
Use This One
First add jQuery link and than copy jQuery code and paste it..
$('#portfolio-flters li').removeAttr("data-filter");
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="row">
<div class="col-lg-12">
<ul id="portfolio-flters">
<li data-filter=".filter-app">Dhaka</li>
<li data-filter=".filter-card">Rajshahi</li>
</ul>
</div>
</div>
</body>
</html>
First off, I am not good at this, i found similar questions with answers but those did not end up in me being able to fix my own problem.
My problem is as follows: a button that when clicked reveals a div with content.
Closest i have gotten was using only html and css, where clicking the button would result in keeping its own div hidden and showing the others (basicly the exact opposite of what i wanted to achieve). After I had done getting my 'feel' back for html/css i started with javascript and rewriting stuff.
Resulting in this: (html)
$(document).ready(function () {
$("#button").click(function (){
var target = '#' + $(this).data('target');
$("#hidden-div").slideUp()
$(target).slideDown()
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main" id="main">
<section class="listview">
<h1 class="title">List of functions used on the page</h1>
<ul class ="list" id="list">
<li>Splash page.
<button class="btn-list" data-target="splash-div" id="splash-btn">Explanation</button><br>
<div class="hidden-div" id="splash-div">blablabla</div><br>
<a class="listlink" href="#splash">Take me there!</a></li>
<li>Interactive list.
<button class="btn-list" data-target="list-div" id="list-btn">Explanation</button><br>
<div class="hidden-div" id="list-div">blablabla</div><br>
<a class="listlink" href="#list">Take me there!</a></li>
</ul>
</section>
</div>
EDITTED CODE.
I have tried .css(instead of show), first trying hidden true/false and after content: none/block.
Content none/block is how i got to make it 'work' without using javascript.
Am i missing something obvious? Or am i trying by using the wrong functions?
According to your request I have updated your Q structure and applied a function that is suitable for your situation. If this is not what you want, please comment I will restructure it and answer as per your need. Hopes this help.ty!
UPDATED CODE FOR YOU
$(document).ready(function() {
$("body").on('click', '.btn-list', function() {
$(".hidden-div").hide();
$(this).closest(".hideClass").find(".hidden-div").show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main" id="main">
<section class="listview">
<h1 class="title">List of functions used on the page</h1>
<ul class="list" id="list">
<li class="hideClass">
<p>Splash page1.</p>
<button class="btn-list" data-target="#splash-div" id="splash-btn">Show me more</button><br>
<div class="hidden-div" id="splash-div">blablabla</div>
<a class="listlink" href="#splash">Take me there!</a>
</li>
<li class="hideClass">
<p>Splash page2.</p>
<button class="btn-list" data-target="#list-div" id="list-btn">Show me more</button><br>
<div class="hidden-div" id="list-div">blablabla</div>
<a class="listlink" href="#list">Take me there!</a>
</li>
<li class="hideClass">
<p>Splash page3.</p>
<button class="btn-list" data-target="#list-div" id="list-btn">Show me more</button><br>
<div class="hidden-div" id="list-div">blablabla</div>
<a class="listlink" href="#list">Take me there!</a>
</li>
<li class="hideClass">
<p>Splash page4.</p>
<button class="btn-list" data-target="#list-div" id="list-btn">Show me more</button><br>
<div class="hidden-div" id="list-div">blablabla</div>
<a class="listlink" href="#list">Take me there!</a>
</li>
<li class="hideClass">
<p>Splash page5.</p>
<button class="btn-list" data-target="#list-div" id="list-btn">Show me more</button><br>
<div class="hidden-div" id="list-div">blablabla</div>
<a class="listlink" href="#list">Take me there!</a>
</li>
</ul>
</section>
</div>
Check this out, should solve your problem.
$(document).ready(function() {
$("#splash-btn").click(function() {
$("#splash-div").show();
});
$("#list-btn").click(function() {
$("#list-div").show();
});
});
.hidden-div {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main" id="main">
<section class="listview">
<h1 class="title">List of functions used on the page</h1>
<ul class="list" id="list">
<li>Splash page.</li>
<button class="btn-list" id="splash-btn">Show me more</button><br>
<div class="hidden-div" id="splash-div">blablabla</div>
<button class="btn-list" id="list-btn">Show me more</button><br>
<div class="hidden-div" id="list-div">blablabla</div>
</ul>
</section>
</div>
$(document).ready(function() {
$("button").on('click',function() {
debugger;
var selecteddiv = $(this).attr("id") + '-div';
$("#"+selecteddiv).toggle();
});
});
.hidden-div {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main" id="main">
<section class="listview">
<h1 class="title">List of functions used on the page</h1>
<ul class="list" id="list">
<li>Splash page.</li>
<button class="btn-list" id="splash">Show / Hide</button><br>
<div class="hidden-div" id="splash-div">blablabla</div>
<button class="btn-list" id="list">Show / Hide</button><br>
<div class="hidden-div" id="list-div">sdfsdfsdfsdf</div>
</ul>
</section>
</div>
does anyone know how Can I add a class in the A tag:
Subscribe
Here is my html:
<div class="module" id="prod-subscription">
<div class="entity entity-bean bean-ap-bl-instruct contextual-links-region block container">
<div class="contextual-links-wrapper contextual-links-processed">
<a class="contextual-links-trigger" href="#">Configure</a>
<ul class="contextual-links">
<li class="bean- first last">
bloc
</li>
</ul>
</div>
<div class="row">
<div class="col-md-3">
<h2>simple<span>in 3 </span></h2>
</div>
<div class="col-md-6">
<ol>
<li>
<span>1</span><p>text</p>
</li>
<li>
<span>2</span><p>texte testx</p>
</li>
<li>
<span>3</span><p>and text</p>
</li>
</ol>
</div>
<div class="col-md-3">
Subscribe
</div>
</div>
</div>
</div>
you can use
$('a[href="/souscription/digital-vie"]').addClass('classHere');
or
$('div#prod-subscription a[href="/souscription/digital-vie"]').addClass('classHere');
or
$('a[href="/souscription/digital-vie"]:contains("Subscribe")').addClass('classHere');
$('a[href="/souscription/digital-vie"]:contains("Subscribe")').addClass('classHere');
.classHere{
background : red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="module" id="prod-subscription">
<div class="entity entity-bean bean-ap-bl-instruct contextual-links-region block container">
<div class="contextual-links-wrapper contextual-links-processed">
<a class="contextual-links-trigger" href="#">Configure</a>
<ul class="contextual-links">
<li class="bean- first last">
bloc
</li>
</ul>
</div>
<div class="row">
<div class="col-md-3">
<h2>simple<span>in 3 </span></h2>
</div>
<div class="col-md-6">
<ol>
<li>
<span>1</span><p>text</p>
</li>
<li>
<span>2</span><p>texte testx</p>
</li>
<li>
<span>3</span><p>and text</p>
</li>
</ol>
</div>
<div class="col-md-3">
Subscribe
</div>
</div>
</div>
</div>
You could use jQuery's filter function and filter the link where the exact text is 'Subscribe' (this may cause problems if you have multiple links with that exact text)
$('a').filter(function() {
return $(this).text() === 'Subscribe';
}).addClass('new-class');
.new-class {color:red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Subscribe
Not sure I fully understand the question. Do you just want to give the anchor tag a class? That can be done as simply as <a class="your_class" href="your_link">Subscribe</a>
I have this script.
<script type="text/javascript">
$(document).ready(function(){
$("#send").click(function(){
$("#image_results").load('/gallary1.php');
});
});
</script>
When I click the send button it should load gallary1.php into the image_results <Div> however it doesn't load it properly?
If I just use the include_once("gallary1.php"); command inside the <Div> then is displays properly. I'm guessing the Script is changing the code somehow but have no idea how.
Below is the php page I'm trying to load in.
$gallary="";
$gallary.='
<div class="content">
<div id="rg-gallery" class="rg-gallery">
<div class="rg-thumbs">
<div class="es-carousel-wrapper">
<div class="es-nav">
<span class="es-nav-prev">Previous</span>
<span class="es-nav-next">Next</span>
</div>
<div class="es-carousel">
<ul>
<li><img src="images/thumbs/1.jpg" data-large="images/1.jpg" alt="image01" data-description="From off a hill whose concave womb reworded" /></li>
<li><img src="images/thumbs/2.jpg" data-large="images/2.jpg" alt="image02" data-description="A plaintful story from a sistering vale" /></li>
</ul>
</div>
</div>
</div>
</div>
</div>';
echo $gallary;
Any help would be greatly appreciated. Also if there is any more info I need to provide please let me know.
I have found that if I load gallary1.php via include then the resulting html is:
<div class="content">
<div id="rg-gallery" class="rg-gallery"><div class="rg-view"></div>
<div class="rg-thumbs">
<div class="es-carousel-wrapper">
<div class="es-nav">
<span class="es-nav-prev">Previous</span>
<span class="es-nav-next">Next</span>
</div>
<div class="es-carousel">
<ul style="width: 154px; display: block; margin-left: 0px;">
<li class="selected" style="margin-right: 3px; width: 69px;"><img src="http://www.fyom.16mb.com/images/thumbs/1.jpg" data-large="images/1.jpg" alt="image01" data-description="From off a hill whose concave womb reworded"></li>
<li style="margin-right: 3px; width: 69px;"><img src="http://www.fyom.16mb.com/images/thumbs/2.jpg" data-large="images/2.jpg" alt="image02" data-description="A plaintful story from a sistering vale"></li>
</ul>
</div>
<div class="es-nav"><span class="es-nav-prev" style="display: none;">Previous</span><span class="es-nav-next" style="display: none;">Next</span></div></div>
</div>
<div class="rg-image-wrapper"> <div class="rg-image-nav"> Previous Image Next Image </div> <div class="rg-image"><img src="images/1.jpg"></div> <div class="rg-loading" style="display: none;"></div> <div class="rg-caption-wrapper"> <div class="rg-caption" style=""> <p>From off a hill whose concave womb reworded</p> </div> </div> </div></div>
</div>
However when is loaded via the script:
<div class="content">
<div id="rg-gallery" class="rg-gallery">
<div class="rg-thumbs">
<div class="es-carousel-wrapper">
<div class="es-nav">
<span class="es-nav-prev">Previous</span>
<span class="es-nav-next">Next</span>
</div>
<div class="es-carousel">
<ul>
<li><img src="images/thumbs/1.jpg" data-large="images/1.jpg" alt="image01" data-description="From off a hill whose concave womb reworded"></li>
<li><img src="images/thumbs/2.jpg" data-large="images/2.jpg" alt="image02" data-description="A plaintful story from a sistering vale"></li>
</ul>
</div>
</div>
</div>
</div>
</div>
So something is not being picked up. As is it displaying what I echo out however when the page loaded properly is is inheriting additional formatting.
You can substitute using .html for php, as no dynamic data appears to be included at html echoed from php
gallary1.html
<div class="content">
<div id="rg-gallery" class="rg-gallery">
<div class="rg-thumbs">
<div class="es-carousel-wrapper">
<div class="es-nav">
<span class="es-nav-prev">Previous</span>
<span class="es-nav-next">Next</span>
</div>
<div class="es-carousel">
<ul>
<li><img src="images/thumbs/1.jpg" data-large="images/1.jpg" alt="image01" data-description="From off a hill whose concave womb reworded" /></li>
<li><img src="images/thumbs/2.jpg" data-large="images/2.jpg" alt="image02" data-description="A plaintful story from a sistering vale" /></li>
</ul>
</div>
</div>
</div>
</div>
</div>
javascript
$(document).ready(function(){
$("#send").click(function(){
$("#image_results").load("gallary1.html");
});
});
plnkr http://plnkr.co/edit/VN5KUgrXpZtrkCAKr2I6?p=preview
Assuming you do get html loaded ( still not clear after numerous requests for clarification) ... I believe you have some sort of carousel plugin involved that you need to initialize on the new html in load callback
$("#send").click(function(){
$("#image_results").load("gallary1.html", function(){
// new html now exists, iniitlaize plugin now
$(this).myCarouselPlugin();
});
});
You can try this way:
<script type="text/javascript">
$(document).ready(function(){
$("#send").click(function(){
$.get('/gallary1.php', function(result) {
$("#image_results").html(result);
})
});
});
</script>`
And in your gallary1.php:
//echo your html here
Or the second way:
Your gallary1.php:
require_once('content.php');
then create another php file of content content.php:
//your html here, don't have to use echo
you must see if you call your gallary1.php directly in the browser, it's give you something..
You can look at the chmod ( 755 for example) of this file ..
if your file is in the same folde, you can put:
$("#image_results").load('gallary1.php');//without the /
I am trying to use the metro UI css library but I can't figure out why my navbar css is not working.
Here's my html file code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>TelePrint Blog</title>
<link rel="stylesheet" href="http://localhost/teleprintblog/assets/css/metro-bootstrap.css">
<script src="http://localhost/teleprintblog/assets/js/jquery.js"></script>
<script src="http://localhost/teleprintblog/assets/js/metro.min.js"></script>
</head>
<body>
<nav class="navigation-bar dark fixed">
<nav class="navigation-bar-content">
<div class="element">
<a class="dropdown-toggle" href="#">METRO UI CSS</a>
<ul class="dropdown-menu" data-role="dropdown">
<li>Main</li>
<li>File Open</li>
<li class="divider"></li>
<li>Print...</li>
<li class="divider"></li>
<li>Exit</li>
</ul>
</div>
<span class="element-divider"></span>
<a class="element brand" href="#"><span class="icon-spin"></span></a>
<a class="element brand" href="#"><span class="icon-printer"></span></a>
<span class="element-divider"></span>
<div class="element input-element">
<form>
<div class="input-control text">
<input type="text" placeholder="Search...">
<button class="btn-search"></button>
</div>
</form>
</div>
<div class="element place-right">
<a class="dropdown-toggle" href="#">
<span class="icon-cog"></span>
</a>
<ul class="dropdown-menu place-right" data-role="dropdown">
<li>Products</li>
<li>Download</li>
<li>Support</li>
<li>Buy Now</li>
</ul>
</div>
<span class="element-divider place-right"></span>
<a class="element place-right" href="#"><span class="icon-locked-2"></span></a>
<span class="element-divider place-right"></span>
<button class="element image-button image-left place-right">
Sergey Pimenov
<img src="images/211858_100001930891748_287895609_q.jpg"/>
</button>
</nav>
</nav>
<header class="headerr row">
<div class="col-md-6" style="border:3px solid #F00;">
<img src="http://localhost/teleprintblog/assets/img/logo.png"
class="img-responsive" alt="logo"/>
</div>
<div class="col-md-6" style="border:3px solid #F00;">
</div>
</header>
<section class="row">
<div class="col-md-1 col-xs-offset-1"
style="border:3px solid #00F;z-index:3;position:relative;">
asdasda
</div>
</section>
</body>
</html>
The UI is not appearing properly for the nav-bar although I've loaded the required files.What is causing the problem ?
I've copied the navbar code from here.
Change:
<nav class="navigation-bar dark fixed">
To:
<nav class="navigation-bar dark fixed-top"> <!-- Or fixed-bottom -->
As stated in the documentation:
You can create fixed (top or bottom) navigation bar with built in subclasses `.fixed-top, .fixed-bottom.
The issue with Metro Bootstrap UI CSS aka http://metroui.org.ua/ is this:
You load the theme to localhost, or mabe into a MCV framework, and the dropdown doesnt work! Right?
Okay so look for this line in the html file
<script src="js/load-metro.js"></script>
This is where the problem is.
You can open this file and see the contents - its best to use a full url to include the JS files. I myself removed this line from my files:
<script src="js/load-metro.js"></script>
And I replaced it with the contents:
<script type="text/javascript">
$(function(){
if ((document.location.host.indexOf('.dev') > -1) || (document.location.host.indexOf('modernui') > -1) ) {
$("<script/>").attr('src', '<?=base_url('adminstyle')?>/js/metro/metro-loader.js').appendTo($('head'));
} else {
$("<script/>").attr('src', '<?=base_url('adminstyle')?>/js/metro.min.js').appendTo($('head'));
}
})
</script>
now you will notice I use base_url() - this is for my case only. Replace that with your full url and walla the dropdown should be working.