I have a snippet of HTML that I would like to make into a Wordpress shortcode. This is the snippet.
<div class="small-12 large-7 columns">
<article id="text-39" class="panel widget widget_text">
<div class="textwidget">
<div class="row">
<div class="h3 regular-font">Have Questions?</div>
<div class="h5">TALK TO US 800.810.8412</div>
<div class="button help-email left">Email Us</div>
<!-- BEGIN OLARK CHAT LINK -->
<div class="button help-chat left">Chat Now</div>
<!-- END OLARK CHAT LINK -->
</div>
</div>
</article>
</div>
I've added this to my functions.php and it outputs the code properly when I add [chat] to a page in Wordpress.
// Chat/Email Shortcode
function chat_shortcode() {
return '<div class="small-12 large-7 columns">
<article id="text-39" class="panel widget widget_text">
<div class="textwidget">
<div class="row">
<div class="h3 regular-font">Have Questions?</div>
<div class="h5">TALK TO US 800.810.8412</div>
<div class="button help-email left">Email Us</div>
<!-- BEGIN OLARK CHAT LINK -->
Chat Now</div>
<!-- END OLARK CHAT LINK -->
</div>
</div>
</article>
</div>';
}
add_shortcode('chat', 'chat_shortcode');
However, when I change the live chat link from # to javascript:void(0);" onclick="olark('api.box.expand'), the entire site breaks. How can I make the link work properly?
Your return statement opens and closes using '' so when you use them in your onclick your break the syntax (you close the return statement).
Try this,
onclick="olark(\'api.box.expand\')"
You've built your string with single quotes (inside chat_shortcode()) so when you added the additional onclick code, and it contained single quotes, you escaped out of the first string you were building. Try this:
return <<<HTML
<div class="small-12 large-7 columns">
<article id="text-39" class="panel widget widget_text">
<div class="textwidget">
<div class="row">
<div class="h3 regular-font">Have Questions?</div>
<div class="h5">TALK TO US 800.810.8412</div>
<div class="button help-email left">Email Us</div>
<!-- BEGIN OLARK CHAT LINK -->
Chat Now</div>
<!-- END OLARK CHAT LINK -->
</div>
</div>
</article>
</div>
HTML;
This is called a PHP Heredoc and it allows you to use single quotes and double quotes without escaping the characters in your string. It also has the added benefit of being able to automatically parse any PHP variables you might wish to be injected. I prefer this method for readability and most editors give you syntax highlighting.
Related
enter image description here
enter image description here
enter image description here
add_user.ejs
<!--include header-->
<%- include('include/_header')%>
<!--/include header-->
<!-- Main Site -->
<main id="site-main">
<div class="container">
<div class="box-nav d-flex justify-between">
<div class="filter">
<i class="fas fa-backward"></i>Visi Naudotjai
</div>
</div>
<div class="form-title text-center">
<h2 class="text-dark">Naujas naudotojas</h2>
<span class="text-light">Naudokitės apačioja pateikta forma susikuriant nauja naudotojas</span>
</div>
<!-- add user form -->
<%- include('include/_form')%>
</div>
</main>
<!-- /Main Site -->
<!--include footer-->
<%- include('include/_footer')%>
<!--/include footer-->
Cannot understand there is the problem when i try to presss on main site add new user its need to open a new tab with a new just form but i get just this error someone know there is mistake was made ?
I think the problem is because you're calling add_user.ejs, which is in the include page. So, you probably put the page in the wrong folder. If I'm wrong, you need to rename add_user.html to add_user.ejs, or use html as the View Engine
I am trying to create a horizontally scrolling website, but it feels that I am at a dead end. The website I want to create shouldn't have a horizontal scrollbar and it needs to "jump" from page to page when using the navigation links.
Here is a basic version of the website I currently have - Horizontal Scrolling Project
What I am trying to achieve:
The navigation links should be the only way of navigating and scrolling should have no effect on navigation.
Each module should be on a single page and it's very important that when a module is higher than the height of the page, it is able to scroll to the bottom of the module. The navbar and footer should also always be visible.
And last but not least, it should be able to work with Bootstrap 4.
Please note that I am not expecting someone to do this entire project for me, but rather that if someone could help me or knows of any resources I could check out, I would really appreciate it!
Code:
<html>
<body>
<div class="bar">
<div class="container-fluid">
<div class="row">
<div class="col text-left">
<p>👈</p>
</div>
<div class="col text-center">
<span class="main-link">
Download
</span>
</div>
<div class="col text-right">
<p>👉</p>
</div>
</div>
</div>
</div>
<div class="main">
<div class="container">
<div class="row">
<!--MODULE START-->
<div class="module col-sm-12 offset-sm-0 col-md-10 offset-md-1 col-10 offset-1 text-center">
<p class="title">01</p>
</div>
<!--MODULE END-->
<!--MODULE START-->
<div class="module col-sm-12 offset-sm-0 col-md-10 offset-md-1 col-10 offset-1 text-center">
<p class="title">02</p>
</div>
<!--MODULE END-->
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<p>Made by Jeroen</p>
</div>
</footer>
</body>
</html>
I have been trying to implement a solution for this for a while and I have not come to a clean one yet.
Please, help me.
I have 2 routes:
/login
/register
They have very similar templates:
login.html
<div class="main-container">
<section class="fullwidth-split">
<div class="container-fluid">
<div class="row">
<div class="col-12">
[...more similar html to both views...]
<h2>Login</h2>
</div>
<!--end of col-->
<div class="col-12">
Login form HTML
</div>
</div>
</div>
</section>
</div>
register.html
<div class="main-container">
<section class="fullwidth-split">
<div class="container-fluid">
<div class="row">
<div class="col-12">
[...more similar html to both views...]
<h2>Registration</h2>
</div>
<!--end of col-->
<div class="col-12">
Registration form HTML
</div>
</div>
</div>
</section>
</div>
As you can see, most of the HTML is the same, including the section and container div. I would like to reuse this template and I have tried using child routes and using on the dynamic HTML part, but as you can see the h2 changes its content as well, so unless I duplicate this template it's not possible. The best I've got is using the router-outlet, but then I have a STATIC title h2 and can't change it on the child component because it's on the parent component template.
Any suggestions?
Here is one possible solution.
Create a component (my-component) that uses the shared html and add content projection to it. The html should look something like this:
<div class="main-container">
<ng-content></ng-content>
</div>
You project the different content like this:
register.html:
<my-component>
<h2> Registration </h2>
</my-component>
login.html:
<my-component>
<h2> Login </h2>
</my-component>
You could also have multiple content projections.
This is done by adding a select attribute to the ng-content in my-component:
<div class="main-container">
<ng-content select=".heading-content"></ng-content>
<ng-content select=".form-content"></ng-content>
</div>
And use like this:
<my-component>
<h2 class="heading-content"> Login </h2>
<div class="form-content">
.....
</div>
</my-component>
I'm looking to create a search function in CodeIgniter.
My view file has been splitted in two parts:
Header part, that contains the search bar
<?php echo form_open('controller/live_search');?>
<div class="toolbar-icon-bg hidden-xs" id="toolbar-search">
<div class="input-group">
<span class="input-group-btn"><button class="btn" type="button"><i class="ti ti-search"></i></button></span>
<input type="text" name="search" id="search" class="form-control" placeholder="Search...">
<span class="input-group-btn"><button class="btn" type="button"><i class="ti ti-close"></i></button></span>
</div>
</div>
<?php echo form_close();?>
Body part, that contains the result of the search.
<div class="static-content-wrapper">
<div class="static-content">
<div class="page-content">
<ol class="breadcrumb">
<li class="">Home</li>
<li class="active">Search</li>
</ol>
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<div class="panel panel-white">
<div class="panel-heading">
<h2><!-- Panel --></h2>
</div>
<div class="panel-body">
<div style="clear:both;"></div>
<div id="update"><!-- search results will be added here --></div>
</div>
<div class="panel-footer">
<span class="text-gray"><em>Footer</em></span>
</div>
</div>
</div>
</div>
</div> <!-- .container-fluid -->
</div> <!-- #page-content -->
</div>
In my controller I've written the following code:
public function live_search()
{
//load page template
$this->load->view('templates/header');
$this->load->view('templates/sidebar');
$this->load->view('templates/live_search');
$this->load->view('templates/footer');
}
I would like to "activate" the "live_search" public function simply selecting the search field. Just to give you an example, you can think to the search function of Netflix. When you select the search bar, a black page is loaded automatically and start typing you see the results of your search.
So, when I select the search text field my script should load the "templates/live_search" page.
How could I do this?
Thanks for your kind support.
DOM manipulation like this isn't done in CodeIgniter on the server, its done client site in JS. You need JS to listen for the search input focus, and then either AJAX in your "live search page" (not exactly clear on what you want there), or load everything on initial page load, and then just show the "live search page" on focus of the search bar.
If you're using jQuery it might look something like this:
$('body').on("focus","#search",function(){
$('.live-search-container').show()
//or do an ajax call
});
I'm trying to make custom gallery grid using bootstrap. All goes well but im stuck on last step.
I'm posting HTML structure since i belive it's problem in here somewhere but my code cotains some css (paddings/margins mostly) and JS (explained why below).
HTML:
<div class="about_gallery">
<div class="col-xs-9 pd-9">
<div class="row">
<div class="col-xs-8 pd-8">
<div class="color1"><img src="http://1.bp.blogspot.com/-lTAkZcm_aO0/VoR2I2nDq8I/AAAAAAAAGIg/G0vVuMw1nrI/s1600/NEW-YEARS-RESOLUTIONS-calendar.jpg"/></div>
</div>
<div class="col-xs-4 pd-4">
<div class="color2"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTj4NOe5Usd1_GJv4waOL5JbnJFVEGeduUHlB3Ej-TIpUhqVEouLw"/></div>
</div>
</div>
<div class="row">
<div class="col-xs-4 pd-4">
<div class="color3"><img src="https://s-media-cache-ak0.pinimg.com/originals/7c/7e/41/7c7e41ad177113fecc68a0213cf724c2.jpg"/></div>
<div class="color11"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTj4NOe5Usd1_GJv4waOL5JbnJFVEGeduUHlB3Ej-TIpUhqVEouLw"/></div>
</div>
<div class="col-xs-8 pd-8">
<div class="color4"><img src="http://1.bp.blogspot.com/-lTAkZcm_aO0/VoR2I2nDq8I/AAAAAAAAGIg/G0vVuMw1nrI/s1600/NEW-YEARS-RESOLUTIONS-calendar.jpg"/></div>
<div class="row">
<div class="col-xs-6 cl-5">
<div class="color5"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTj4NOe5Usd1_GJv4waOL5JbnJFVEGeduUHlB3Ej-TIpUhqVEouLw"/></div>
<div class="color12"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTj4NOe5Usd1_GJv4waOL5JbnJFVEGeduUHlB3Ej-TIpUhqVEouLw"/></div>
</div>
<div class="col-xs-6 cl-6">
<div class="color6"><img src="https://s-media-cache-ak0.pinimg.com/originals/7c/7e/41/7c7e41ad177113fecc68a0213cf724c2.jpg"/></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-3 pd-3">
<div class="color8 "><img class="pion-rect" src="https://s-media-cache-ak0.pinimg.com/originals/7c/7e/41/7c7e41ad177113fecc68a0213cf724c2.jpg"/></div>
<div class="color9"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTj4NOe5Usd1_GJv4waOL5JbnJFVEGeduUHlB3Ej-TIpUhqVEouLw"/></div>
<div class="color10"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTj4NOe5Usd1_GJv4waOL5JbnJFVEGeduUHlB3Ej-TIpUhqVEouLw"/></div>
</div>
</div>
Here is fiddle: http://jsfiddle.net/y6co8e5u/
The goal is to have grid like here: Grid example
As you can see on bottom left corner instead of 1 horizontal rectangle i have two squares and i don't know how to "connect" them since it's in different columns. It's my first time with bootstrap so it's probably a little bit messy. (I'm also not sure if my JS is needed here but when i added spaces between pictures i needed to extend the pictures) I'm open for any other solution too.
Thanks for help!
I will assume you are trying to add the .color7 div, append it to <div class="col-xs-4 pd-4">, just after the .color3 block. The block will look like this:
<div class="col-xs-4 pd-4">
<div class="color3"><img src="https://s-media-cache-ak0.pinimg.com/originals/7c/7e/41/7c7e41ad177113fecc68a0213cf724c2.jpg"/></div>
<div class="color7"><img src="http://1.bp.blogspot.com/-lTAkZcm_aO0/VoR2I2nDq8I/AAAAAAAAGIg/G0vVuMw1nrI/s1600/NEW-YEARS-RESOLUTIONS-calendar.jpg"/></div>
</div>
then on the css, set .color7 {width: calc(200% + 10px);}
here is the updated fiddle: http://jsfiddle.net/y6co8e5u/3/
no change to the js code.
You need to restructure your HTML a bit, have to put
<div class="color10"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTj4NOe5Usd1_GJv4waOL5JbnJFVEGeduUHlB3Ej-TIpUhqVEouLw"/></div>
inside the <div class="col-xs-4 pd-4">
of second row. Hope this is what you want.
Check updated jsfiddler: http://jsfiddle.net/mayankN/y6co8e5u/1/