I would like to create an user friendly interface on my site where from a php restrictred area of the site I can add a simple HTML to another open page of the site.
The simple HTML (below "BASIC HTML") has always the same structure, I want the user to change the words inside the header,the main div and to upload a new image.
I'm struggling about how to do it. A nice idea i had is to use ZinoUI, sothat in the restricted area i can show the basic HTML and the user can modify it. It will be something like what shown in "ZinoUI HTML".
What I don't really know how to do is how to "print" this new HTML code modified by the user and insert it on the open page of the site.
Is it possible? is this the easier way?
BASIC HTML
<div id="simple HTML">
<div class="header">
<h1>Lorem ipsum dolor sit amet..</h1>
</div>
<div class="main">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>
<div class="image">
<img src="pic_mountain.jpg" alt="Mountain View">
</div>
</div>
.
ZinoUI HTML
<div class="header" id="editable">
<h1>Lorem ipsum dolor sit amet..</h1>
</div>
<div class="main" id="editable">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>
<div class="image" id="editable">
<img src="pic_mountain.jpg" alt="Mountain View">
</div>
<p>To activate editable control, double click on the text above.</p>
</div>
<script type="text/javascript">
$(function () {
$("#editable").zinoEditable({
control: "textarea",
event: "dblclick"
});
});
</script>
First of all, each HTML id must be unique, so you don't want to have a series of <div id="editable">...</div>.
What you can do is add an editable class <div class="editable">..</div> if you are going to have more than one editable div and use
$(function () {
$(".editable").zinoEditable({
control: "textarea",
event: "dblclick"
});
});
Then to save you subscribe to the save event, say passing in the control's id doing the save and the edited text:
<script type="text/javascript">
$(function () {
$(".editable").zinoEditable({
buttons: {
"Save": function (ui) {
$(this).zinoEditable("save");
},
"Cancel": function (ui) {
$(this).zinoEditable("close");
}
},
save: function (event, ui) {
$.post("../../request?plugin=editable", {
field: $(this).attr("id"),
value: ui.control.val()
});
console.log("save");
//return false;
}
});
});
</script>
Where "../../request?plugin=editable" is the PHP function to call to save the data (although replace with whatever is appropriate for you).
Related
I have been told that this isn't possible via CSS alone and so have turned to javascript.
Using onmouseover but I cannot get the hidden element to appear. I want it so that when hovering over element with ID #a, element with class .excerpt-box appears and then disappears when the mouse is moved away.
Does anyone know where I am going wrong? Thanks
Here's the code I've written so far:
The CSS includes visibility hidden for .excerpt-box.
<div class="ind-circle" id="a" onmouseover="showExcerpt()">
<p class="circle-title"> Read more</p>
</div>
<div class="excerpt-box" id="b">
<h1 class="excerpts-title">This is an example excerpt title...</h1>
<img class="excerpts-fi" src="<?php echo BASE_URL . '/assets/images/water.jpg'; ?>" alt="">
<p class="excerpts-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
function showExcerpt() {
document.getElementByClass('excerpt-box').style.visibility = 'visible';
}
First, the function you are looking for is document.getElementsByClassName.
After this you have to select a particular element by index. See this link.
Better would be this solution:
Grab the id of the div (id='b') and set display to block.
As you can see, the div is display:none; at startup.
function showExcerpt() {
document.getElementById('b').style.display = 'block';
}
.excerpt-box {
display: none;
}
<div class="ind-circle" id="a" onmouseover="showExcerpt()">
<p class="circle-title"> Read more</p>
</div>
<div class="excerpt-box" id="b">
<h1 class="excerpts-title">This is an example excerpt title...</h1>
<img class="excerpts-fi" src="<?php echo BASE_URL . '/assets/images/water.jpg'; ?>" alt="">
<p class="excerpts-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
Your HTML structure allows to do the same via CSS as well.
.excerpt-box goes right after the .ind-circle and can be targeted via adjacent sibling combinator.
.excerpt-box {
display: none;
}
.ind-circle:hover + .excerpt-box {
display: block;
}
I am using anchor tags to link navbar to the headers inside of a div on same page. When I click on the last header it shows up in the middle of the container instead of at the very top.
I want the bottom header to show up at the very top of the container and leave some white space below it.
Here is codepen https://codepen.io/sasha-code/pen/qBOyBrW
Is there an html way to do it? if not, is there a js way to add white space dynamically below the last section to make sure the header is at the top.
PS. I know this is happening because there is no scroll left. I want to somehow add it dynamically. I don't want to add hardcoded white space.
<div>
<a href='#top'>Top</a>
<a href='#middle'>Middle</a>
<a href='#bottom'>Bottom</a>
</div>
<div class="content">
<div>
<h2 id="top">Header Top</h2>
text
</div>
<div>
<h2 id="middle">Header Middle</h2>
text
</div>
<div>
<h2 id="bottom">Header Bottom</h2>
text
</div>
You could set the min-height of the last div section to 100% of the parent:
.content {
height: 400px;
width: 300px;
overflow:scroll;
}
#last {
min-height: 100%;
}
<div>
<a href='#top'>Top</a>
<a href='#middle'>Middle</a>
<a href='#bottom'>Bottom</a>
</div>
<div class="content">
<div>
<h2 id="top">Header Top</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div >
<h2 id="middle">Header Middle</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div id="last">
<h2 id="bottom">Header Bottom</h2>
Lorem ipsum dolor sit amet.
</div>
</div>
Put this code at the end of your file:
<br> <br> <br>
Now it should work fine 😊
As you can tell from my code. I am very new to this so, please try to keep your answers simple.
The assignment was to make the whatever name is entered comes back in uppercase which I did.
But I want everything to show in uppercase, both the name and paragraph. I have tried everything that I can think of, I feel like it's something simple.
This is what I have so far:
$(document).ready(function() {
$("#letter form").submit(function(event) {
var nameInput = $("input#name").val().toUpperCase();
$(".name1").text(nameInput);
$("#response").show();
event.preventDefault();
});
});
#response {
display: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!--link href="css/styles.css" rel="stylesheet" type="text/css"-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!--script src="js/scripts.js"></script-->
<div class="container">
<h1>Fill in the blanks to write your story!</h1>
<div id="letter">
<form>
<div class="form-group">
<label for="name">A name</label>
<input id="name" class="form-control" type="text">
</div>
<button type="submit" class="btn">Show me the response</button>
</form>
</div>
<div id="response">
<h1>A fantastical adventure</h1>
<blockquote>
<p><span class="name1"></span>, Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</blockquote>
</div>
</div>
Assuming that you want it for ALL your <p> tags, you jQuery selectors follow the same rules as CSS selectors. With this in mind you can get the innerText with jQuery .text():
// Select ALL p tags, and set their text to upper case
$('p').text($('p').text().toUpperCase());
If you want it specifically for the first parent paragraph that contains a child with the class name1 we can use a similar idea with jQuery .closest():
// Split into a var to help readability
// Grab the "closest ancestor" (get the first parent that is a p)
var closestP = $('.name1').closest('p');
closestP.text(closestP.text().toUpperCase());
I hope this is what you're looking for!
Edit: Another way that requires editing the html for that specificp:
HTML
<div id="response">
<h1>A fantastical adventure</h1>
<blockquote>
<p id="toCapital"><span class="name1"></span>, Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</blockquote>
</div>
jQuery
$('#toCapital').text($('#toCapital').text().toUpperCase());
Here I used a similar idea to the first example, except instead of selecting ALL paragraph tags, I added an id to the existing one, selected that, and then modified the text.
You could also do a little more advanced selection, but this will not select the same paragraph that you want to capitalize if you add any more beforehand:
var first = $('p').first();
first.text(first.text().toUpperCase());
I'm sure you can see where I'm going with these, the key is to think about how you can identify what you want to change, it's tricky at first but it gets easier as you start to understand the differences between name, class, id, as well as the other attributes and how you can combine them to create unique combinations.
To make ALL the response to uppercase:
$("#response").html($("#response").html().toUpperCase());
.html() sets and returns all the text and markup of the element selected...
It's on the biggest container $("#response") that you have to apply the toUpperCase() method.
See below:
$(document).ready(function() {
$("#letter form").submit(function(event) {
event.preventDefault();
var nameInput = $("input#name").val().toUpperCase();
$(".name1").text(nameInput);
$("#response").html($("#response").html().toUpperCase());
$("#response").show();
});
});
#response {
display: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!--link href="css/styles.css" rel="stylesheet" type="text/css"-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!--script src="js/scripts.js"></script-->
<div class="container">
<h1>Fill in the blanks to write your story!</h1>
<div id="letter">
<form>
<div class="form-group">
<label for="name">A name</label>
<input id="name" class="form-control" type="text">
</div>
<button type="submit" class="btn">Show me the response</button>
</form>
</div>
<div id="response">
<h1>A fantastical adventure</h1>
<blockquote>
<p><span class="name1"></span>, Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</blockquote>
</div>
</div>
I am working with the latest version of Flexslider from Woo Themes and Bootstrap 3.3.5.
I am wondering if there is functionality for swiping with the mouse pointer? It has left and right arrows and touch swipe, but I can't seem to find anything based on swiping with the mouse pointer from a PC/laptop.
This is all that I currently have so far:
<div class="flexslider">
<ul class="slides">
<li style="background-color: aqua;">
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</li>
<li style="background-color: yellow;">
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</li>
</ul>
</div>
And my JavaScript code:
$(document).ready(function () {
$('.flexslider').flexslider({
animation: "slide",
pauseOnHover: true,
slideshowSpeed: 3000,
after: function () {
$('.flexslider').resize();
}
});
});
I have looked through the docs but can't find anything.
I did that years ago, so not shure it will still work on most recent release of Flexslider; anyway maybe i will point you in the right direction...
Basically you should add a drag event to flexslider, so:
1) first of all implement the jquery.event.drag plug in
2)in jquery.flexslider.js add a block to support the new event, like this:
if (vars.drag) {
slider.bind('drag', function(event, delta) {
event.preventDefault();
var target = (delta.deltaX < 0) ? slider.getTarget('next') : slider.getTarget('prev');
slider.flexAnimate(target, vars.pauseOnAction);
});
}
you can easily find where to place it just finding where the other events support are, like this:
if (vars.mousewheel) {
...
}
if (vars.drag) {
...
}
3) Add the event to the defaults ones:
$.flexslider.defaults = {
...
drag: false,
...
}
4) Finally activate it when you call the Flexslider instance in your HTML page:
$('.flexslider').flexslider({
animation: 'slide',
...
...
drag: true
});
I'd really like to be able to "activate" / "open" a Zurb Foundation Accordion via the URL with the accordion pane in questions hash.
So like example.com/page#accordion1
Is this possible already with Foundation or is it easy to implement? I honestly haven't got a clue :-/
Thanks in advance for any help given!
You can do this by adding an unique attribute to each accordion title <div class="title" data-ref="panel-1"> In this case I added a data-ref attribute. Then you will need to add some jQuery to look at the hash and if it is a accordion panel, then click that panel.
HTML
<ul class="accordion">
<li class="active">
<div class="title" data-ref="panel-1">
<h5>Accordion Panel 1</h5>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</li>
<li>
<div class="title" data-ref="panel-2">
<h5>Accordion Panel 2</h5>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</li>
<li>
<div class="title" data-ref="panel-3">
<h5>Accordion Panel 3</h5>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</li>
</ul>​
jQuery
jQuery(function() { // Document ready shorthand
// Get the hash and remove the #
var hash = window.location.hash.replace('#', '');
if (hash != '') {
// Cache targeted panel
$target = $('.title[data-ref="' + hash + '"]');
// Make sure panel is not already active
if (!$target.parents('li').hasClass('active')) {
// Trigger a click on item to change panel
$target.trigger('click');
}
}
});​
View in action
Edit code
One note: When in jsfiddle edit the hash will not work. Need to view in the full mode.
UPDATE
If you want to have a link that opens up a panel and updates hash. You will need to add a specific class to the link. In my example I add panel-btn
HTML
Goto Panel 2
jQuery
$('.panel-btn').click(function(e){
// Get the links href and remove the #
target_hash = $(this).attr('href').replace('#','');
// Click targeted panel
$('.title[data-ref="' + target_hash + '"]').trigger('click');
// Update hash, so that if page is refreshed, target panel will open
window.location.hash = target_hash;
// Stop all default link functionality
return false;
});
Updated jsfiddle view
Updated jsfiddle code
If you are looking for more of a history thing when each panel is clicked. You will need to add a click event to each .title and get its data-ref and change the hash to that, like this:
$('.title').click(function(){
// Get the data-ref
hash = $(this).attr('data-ref');
// Set hash to panels hash
window.location.hash = hash;
});
If you are using Foundation 5:
Foundations Accordion has a custom event click.fndtn.accordion you can use. It will take care of the proper open/closed states:
jQuery(document).ready(function($) {
var hash = window.location.hash;
if (hash != '') {
$('[data-accordion] [href="' + hash + '"]').trigger('click.fndtn.accordion');
}
});
See the example here, it will programatically open the second tab upon page load by detecting a window hash (simulated by a dummy hash in the code):
http://jsfiddle.net/ynyrrm99/
Link to the page without setting the a link to data-tab or any other settings. As of foundation 5.5.1 it will parse the uri with a hash on page load... meaning it doesn't matter how you set the originating link.
Set a variable to the hash in the URL, give the content panel div the same id as in your hash. Then add a class of .active to the panel with the same id as your link.
if(window.location.hash) {
var hash = window.location.hash;
$( hash ).addClass( "active" );
}