I want to show popover but I don't see it.
CODE
echo '
<a data-toggle="popover"
data-trigger="hover"
data-html="true"
data-placement="top"
data-content="HTML MARKUP"
class="cf_box popover-extra-balik ' . $this->custom_fields[ 34 ]->name . ' ' . $i->fields[ 34 ] . ' ">
';
echo '<span class="field_value">' . JText::_( 'COM_DJCLASSIFIEDS_EXTRA_BALIK_PREMIUM' ) . '</span>';
echo '</a>';
Website Link: link
Image: Image
Thanks!!
Add below Javascript in your code.
$(function () {
$('[data-toggle="popover"]').popover()
});
Example
I removed some PHP code because it's not supported here.
$(function() {
$('[data-toggle="popover"]').popover()
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<a data-toggle="popover" data-trigger="hover" data-html="true" data-placement="top" data-content="<strong>BALÍK PREMIUM obsahuje :</strong>
<ul>
<li>sezónne pneumatiky</li>
<li>najbližšiu servisnú prehliadku so zľavou</li>
<li>dezinfekcia vozidla</li>
<li>1 x čistenie a doplnenie klimatizácie počas leta zdarma</li>
<li>povinná výbava zdarma</li>
<li>zvýhodnené financovanie</li>
</ul>" class="cf_box popover-extra-balik">
<span class="field_value">BALIK_PREMIUM</span>
</a>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
Related
when I click on nav links it redirects to another page as I have href in li a tags, but the active link still remains at home. For example, If I click on profile the active link it shows on Home page rather profile or if I click on about page the active link is still on home page. How can I change the active link depending on whatever navbar content user clicks on? If user clicks on profile the active should be removed from home and set to profile. How can I achieve that?
What I have tried till now:
My code:
<html>
<head>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<?php
echo ' <nav class="navbar navbar-expand-md navbar-dark bg-dark p-4 sticky-top">';
echo '<div class="container-fluid">';
echo ' <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" >';
echo ' <span class="navbar-toggler-icon"></span>';
echo ' </button>';
echo ' <div class="collapse navbar-collapse" id="navbarResponsive">';
echo ' <ul class="navbar-nav ml-auto">';
echo ' <li class="nav-item active">';
echo ' Home';
echo ' </li>';
echo '<li class="nav-item">';
echo ' Profile';
echo '</li>';
echo ' <li class="nav-item">';
echo ' About';
echo '</li>';
echo '</div>';
echo ' </div>';
echo ' </nav>';
echo '<script>
$(document).on("click", "ul li",(function(event) {
event.preventDefault();
$(this).addClass("active").siblings().removeClass("active)
});
</script>';
?>
</body>
</html>
You're only ever setting/removing the active class when the button is clicked.
You'll also need javascript code that:
runs on page load
checks the current url
removes the 'active' class from all nav links
then adds the 'active' class to the nav link that matches the current url
Something like this:
$(function() {
let pageName = location.pathname.split('/').slice(-1)[0];
let currentLink = $('.navbar-nav .nav-item a[href="' + pageName + '"]');
if (currentLink) {
$('.navbar-nav .nav-item').removeClass('active');
currentLink.parent().addClass('active');
}
});
I want to make an id reference "logout" work when clicked from my php code. Please this would aid me very well in continuing the project. this method is important because it involves phonegap
php file
The php file gets user details from the database. the logout id is used to call the php page through an AJAX request and then log the user out and redirect them.
<?php
session_start();
$con = mysqli_connect("localhost", "*****", "*****", "*****");
//check connection...
if ($con === false) {
die ("couldn't connect to SQL Server");
}
if (isset($_SESSION['people_email'])){
$selectdata = "SELECT * FROM people WHERE people_email = '".$_SESSION['people_email']."'" ;
$query = mysqli_query($con, $selectdata);
while ($row = mysqli_fetch_array($query)) {
echo '<div class="ui fluid card">';
echo '<div class="extra content">';
echo '<div class="left floated meta">';
echo '<a href="#" id="logout">';
echo '<i class="remove circle icon"></i>';
echo "Log out";
echo '</a>';
echo '</div>';
echo '<div class="right floated meta">';
echo '<a>';
echo '<i class="plus icon"></i>';
echo "Upload a photo";
echo '</a>';
echo '</div>';
echo '</div>';
echo '<div class="image">';
echo '<img src="/images/avatar2/large/kristy.png">';
echo '</div>';
echo '<div class="content">';
echo '<a class="header">'.$row['people_name'].'</a>';
echo '<div class="meta">';
echo '<span class="date">'.$row['people_name'].'</span>';
echo '</div>';
echo '<div class="description">'.$row['people_email'].'</div>';
echo '</div>';
echo '<div class="extra content">';
echo '<a><i class="send icon"></i>'.$row['people_username'].'</a>';
echo '<a><i class="alarm icon"></i>'.$row['people_username'].'</a>';
echo '</div>';
echo '</div>' ;
}
}
else {
echo "no";
}
?>
this is the HTML file.
the html file graps the user data for php echo and displays them.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
<!-- Path to your custom app styles-->
<link rel="stylesheet" href="css/my-app.css">
<link rel="stylesheet" href="Semantic/semantic.min.css">
<!--<link rel="stylesheet" type="text/css" href="css/index.css" />-->
<title>MyApp</title>
</head>
<body>
<!-- Views -->
<div class="views">
<!-- Your main view, should have "view-main" class -->
<div class="view view-main">
<!-- Pages container, because we use fixed navbar and toolbar, it has additional appropriate classes-->
<div class="pages navbar-fixed toolbar-fixed">
<!-- Page, "data-page" contains page name -->
<div class="page " data-page="profile">
<!-- Top Navbar. In Material theme it should be inside of the page-->
<div class="navbar bar-color">
<div class="navbar-inner">
<div class="left"><i class="bell icon"></i>
</div>
<div class="center"><form><input size="50px" type="search" placeholder="Search"/></form></div>
<div class="right">
<!-- Right link contains only icon - additional "icon-only" class-->
<i class="building outline icon"></i>
</div>
</div>
</div>
<!-- Toolbar. In Material theme it should be inside of the page-->
<div class="toolbar toolbar-bottom bar-color">
<div class="toolbar-inner">
<!-- Toolbar links -->
<i class="eye icon"></i>
<i class="calendar icon"></i>
<i class="plus icon"></i>
<i class="user icon"></i>
</div>
</div>
<!-- Scrollable page content -->
<div class="page-content" >
<div id="profile" style="height:90%; width:90%;margin:auto;position:relative;top:20px;"></div>
</div>
</div>
</div>
</div>
</div>
<script src="js/jquery-2.2.3.min.js"></script>
<script src="Semantic/semantic.min.js"></script>
<script>
$(document).ready(function(){
$.ajax({
type: 'get',
url: 'profile.php',
dataType: 'html',
success: function (response) {
$('#profile').html(response);
}
});
$("#logout").click(function() {
$.ajax({
type: 'get',
url: 'logout.php',
success: function (response) {
if (response == "success") {
window.location.href="login.html";
}else{
alert("You were not logged out");
}
}
});
});
});
</script>
</body>
</html>
You can include data attributes like data-page-id in the log out button html and use jQuery's attr() function to fetch that data.
<div id='logout' data-info='some_info'></div>
$('#logout').attr('data-info'); //returns the value
But I don't see why you need this extra info since it's just a log out button and you can bind it's id to click event.
i have 2 owl carousel in my page. my problem is one works perfectly but another one. i am using php codeigniter. how to resolve this..i have no idea.how to fix.
1. <script> $(document).ready(function(){ $('#owl-carousel1').owlCarousel({
loop:true,
items:3,
margin:9,
autoplay:true,
autoplayHoverPause:true,
nav:true,
autoplayTimeout:1000,
responsiveClass:true,
responsive:{
0:{
items:1,
nav:true
},
600:{
items:3,
nav:false
},
1000:{
items:3, autoplay:true,
nav:true,
loop:true, slideBy:3,
}
} }); }); </script>
<!----view page---->
<div class="row" style="background-color:#00263A">
<div class="container" style="margin-bottom:50px; margin-top:50px" >
<div class="owl-carousel" id="owl-carousel2" >
<?php
foreach($featuredJobs as $fjobs){ ?> <?php if($fjobs->attachment_url != '' ) {?>
<div class="item"><img src="<?php echo base_url(); ?>files/job_attachment/<?php echo $fjobs->attachment_url;?>"
width="250" height="250" class="responsive" />
<h5><?php echo $fjobs->job_name;?></h5>
<span><?php echo $fjobs->job_categories;?></span> <h6><strong><?php echo
'$'.$fjobs->budget_min.'- $'.$fjobs->budget_max;?></strong></h6>
<a href="<?php if(isset($loggedInUser->id) AND $loggedInUser->id != ''){echo site_url("users/login");}else {
echo site_url("job/createBid/".$fjobs->id);}?>"> <button
type="button" class="btn btn-primary pull-left" title=""><i
class="fa fa-gavel"></i>Bid For This Job</button></a>
</div>
<?php } } ?>
</div>
</div>
</div>
Alright, let me give you some insight. Always cross check your code, your Javascript vs your HTML.
Your first line of your Javascript is:
$(document).ready(function(){ $('#owl-carousel1').owlCarousel({
Yet your HTML is as followed
<div class="owl-carousel" id="owl-carousel2">
See your error already? You refer to owl-carousel2 in the HTML, while your Javascript seeks for instance #owl-carousel1. I leave to you then if you want to change your Javascript or your HTML.
I'm using Avada's template (http://theme-fusion.com/avada/contact/) and working with their contact page. Whenever someone submit's a successful form, the page is being reloaded with an additional "alert" box that's populated with a success message. I'm looking to embed a Google Conversion Pixel in this alert box if possible instead of having to send the user to a whole new page. The code that creates the alert box is
<?php if(isset($emailSent) && $emailSent == true) { //If email is sent ?>
<?php echo do_shortcode( '[alert type="success" accent_color="" background_color="" border_size="1px" icon="" box_shadow="yes" animation_type="0" animation_direction="down" animation_speed="0.1" class="" id=""]' . __( 'Thank you', 'Avada' ) . ' <strong>' . $name . '</strong> ' . __( 'for contacting us! Your email was successfully sent!', 'Avada' ) . '[/alert]' ); ?>
<br />
<?php } ?>
which generates
<div class="fusion-alert alert success alert-dismissable alert-success alert-shadow">
<button type="button" class="close toggle-alert" data-dismiss="alert" aria-hidden="true">×</button>
<span class="alert-icon">
<i class="fa fa-lg fa-check-circle"></i>
</span>
Thank you <strong>Test</strong> for contacting us! Your email was successfully sent!</div>
<br />
</div>
Code looking to embed looks like this
<script type="text/javascript">
/* <![CDATA[ */
var google_conversion_id = 1;
var google_conversion_language = "en";
var google_conversion_format = "2";
var google_conversion_color = "ffffff";
var google_conversion_label = "1";
var google_remarketing_only = false;
/* ]]> */
</script>
<script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js">
</script>
<noscript>
<div style="display:inline;">
<img height="1" width="1" style="border-style:none;" alt="" src="//www.googleadservices.com/pagead/conversion/1/?label=1&guid=ON&script=0"/>
</div>
</noscript>
Any help is greatly appreciated
Since each line has opening and closing php tags you can simply paste the html code between two php blocks (but after the "if" block). You might choose to just use the image tag from the noscript block (conversions will still be tracked).
<?php if(isset($emailSent) && $emailSent == true) { //If email is sent ?>
// just the noscript image tag, alternatively paste the whole code here
<img height="1" width="1" style="border-style:none;" alt="" src="//www.googleadservices.com/pagead/conversion/1/?label=1&guid=ON&script=0"/>
<?php
echo do_shortcode( '[alert type="success" accent_color="" background_color="" border_size="1px" icon="" box_shadow="yes" animation_type="0" animation_direction="down" animation_speed="0.1" class="" id=""]' . __( 'Thank you', 'Avada' ) . ' <strong>' . $name . '</strong> ' . __( 'for contacting us! Your email was successfully sent!', 'Avada' ) . '[/alert]' ); ?>
<br />
<?php } ?>
Hello I need change text to icon in my menu after hover on it.
I am getting data from db, so I need do it dynamically.
php in while
echo'<li style="width: ' . $row['item_width'] . 'px;">
<a href="stranky/' . $nazev . '/1/' . $row['id'] . '"
style="background-color: #' . $row['item_color'] . ';" alt="'. $row['item_name'] . '"
class="menu_data" id="search">'. $row['item_name'] . '</a>';
js
<script type="text/javascript">
$(document).ready(function(){
$(".menu_data" ).mouseover(function() {
var icon = $(this).attr('id');
$(this).html('<span class="glyphicon glyphicon-'+icon+'"></span>')
});
$(".menu_data" ).mouseout(function() {
var name = $(this).attr('alt');
$(this).html(name)
});
});
</script>
But it doesn't looks like nice. Have someon better idea?